如何将多个图像显示为背景?

时间:2015-02-21 18:34:32

标签: css html5

我想添加超过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%;}

2 个答案:

答案 0 :(得分:0)

您可能正在寻找multiple background images

.myclass {
  background: background1, background 2, ..., backgroundN;
}

您可以使用background-positionbackground-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

&#13;
&#13;
#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;
&#13;
&#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">