您好，我正在尝试制作一个网站，看起来就像我开车经过各个城市一样。
当我水平滚动网页时，背景中的图像不断变化。
Some thing like this, but I want to add the images as a div and not an image.
HTML
<body>
<div style="height:400px; width:100%; clear:both;"></div>
<div class="image-holder">
<img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt="">
</div>
<div class="image-holder">
<img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt="">
</div>
<div class="image-holder">
<img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt="">
</div>
<div class="image-holder">
<img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt="">
</div>
<div class="image-holder">
<img src="http://www.japaneseammo.com/wp-content/uploads/2014/12/bigstock-Mt-Fuji-with-fall-colors-in-j-48491102.jpg" alt="">
</div>
<!-- Image of me just standing or probably an image created in Sketch -->
<div id="my-">
</div>
</body>
CSS
.container{
width:50%;
margin:0 auto;
}
.container span{
width:30%;
margin:0 1%;
}
#walking-man{
position: fixed;
width: 300px;
height: 100px;
background-color: red;
}
谢谢
最佳答案
简单的 html:
<div class="background">
<img src="your image" alt="">
<img src="your image" alt="">
<img src="your image" alt="">
<img src="your image" alt="">
</div>
<div class="content"></div>
和 CSS:
.background {
position:absolute;
z-index:-1;
top:0;
left:0;
white-space:nowrap;
}
.background img {
display:inline-block;
}
关于html - 将 div 与图像水平对齐，并能够水平滚动它们，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33150226/