我想添加超过1张图片作为我的背景,但我不知道该怎么做。我希望图像能够互相跟随。我不想合并图像。当我向下滑动图像时,应该使用这组代码更改其他图像。
html
<div id="bg">`
<img src="images/two.jpg" alt="">
</div>
CSS
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;}
答案 0 :(得分:0)
您可能正在寻找multiple background images
.myclass {
background: background1, background 2, ..., backgroundN;
}
您可以使用background-position和background-size
.myclass{
background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background-repeat: no-repeat, no-repeat, repeat;
background-position: bottom right, left, right;
}
<强>更新强>
看起来你正试图设置display:block on images
#bg{
}
#bg img{display:block}
&#13;
<div id="bg">`
<img src="http://placehold.it/150x150" alt="">
<img src="http://placehold.it/150x200" alt="">
<img src="http://placehold.it/150x350" alt="">
</div>
&#13;
答案 1 :(得分:0)
background: url(test.png), url(test2.png);
应该可以解决您的问题,但是如果您想通过img
标记来实现它,您可以像下面这样做,但这不会解决您当前的问题;
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
image-3x.png 3x, image-4x.png 4x">