gpt4 book ai didi

html - 将 div 与图像水平对齐,并能够水平滚动它们

转载 作者:行者123 更新时间:2023-11-28 15:59:07 25 4
gpt4 key购买 nike

您好,我正在尝试制作一个网站,看起来就像我开车经过各个城市一样。

当我水平滚动网页时,背景中的图像不断变化。

Some thing like this, but I want to add the images as a div and not an image.

here is my jsfiddle

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;
}

FIDDLE

关于html - 将 div 与图像水平对齐,并能够水平滚动它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33150226/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com