制作背景幻灯片不是全屏?

时间:2014-02-22 16:06:20

标签: html css css3

所以我从鼓室得到了这个Fullscreen Background Image Slideshow :)你绝对可以看到上面链接的网站上的代码...现在我不希望它占据整个页面...我想要添加边距我一直在努力做但却无济于事。我尝试将背景图像的大小减小到较小的百分比,但它仍然没有比例......

如何在幻灯片中添加相等的填充? :(

.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}

1 个答案:

答案 0 :(得分:0)

我认为绝对最简单的方法是这样做:

.cb-slideshow li span {
left: 5%;                   // alter as you like
top: 5%;                    // alter as you like
width: 90%;                 // alter as you like
height: 90%;                // alter as you like
position: absolute;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}