我有一个CSS3滑块,除了高度较大的移动设备外,它的效果非常好。问题是它一直在y
重复,我似乎无法找到问题所在。我尝试使用background: cover
但仍然无法解决问题。
以下是滑块的代码段:
HTML
<div id="slider">
<figure>
<img src="images/eg1.jpg" alt="">
<img src="images/eg2.jpg" alt="">
<img src="images/eg3.jpg" alt="">
<img src="images/eg2.jpg" alt="">
<img src="images/eg1.jpg" alt="">
<img src="images/eg1.jpg" alt="">
<img src="images/eg2.jpg" alt="">
<img src="images/eg3.jpg" alt="">
<img src="images/eg2.jpg" alt="">
<img src="images/eg1.jpg" alt="">
</figure>
</div>
CSS
div#slider {
overflow: hidden;
height: 100vh;
}
div#slider figure img {
width: 20%;
float: left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background:cover;
background-repeat: no-repeat;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 15s slidy infinite;
}
如果您希望在响应式视图(例如768x1024)上看到它的外观,请访问以下网站链接: http://sabirmb.com/Parallax
由于