如何给出两个备用背景图像？答案

【问题标题】：How to give two alternate background images?如何给出两个备用背景图像？
【发布时间】：2016-03-14 07:12:43
【问题描述】：

css代码

body {
    background-color: rgb(224,224,224,0.6); 
  background: url(../img/backlogo.png),url(../img/backlogo2.png);

}

我想一个接一个地交替给出两个背景图像。我已经在中显示了输出。我希望两张图片一个接一个地重复。

【问题讨论】：

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

试试这样的

body {
  background-color: rgb(224, 224, 224, 0.6);
  background: url(https://upload.wikimedia.org/wikipedia/commons/c/c3/Acid2.png), url(http://easycarkeys.com/images/accept.png);
  background-repeat: no-repeat, no-repeat;
  background-position: right center, left center;
  height:250px;
}

参考：Using CSS multiple backgrounds

更新：为避免溢出，根据其他背景图片的宽度和高度设置背景位置

body {
  background-color: rgb(224, 224, 224, 0.6);
  background: url(https://upload.wikimedia.org/wikipedia/commons/c/c3/Acid2.png), url(http://easycarkeys.com/images/accept.png);
  background-repeat: no-repeat, no-repeat;
  background-position:  200px  center,left center;
  height:250px;
}

【讨论】：

我想要重复的图像，当我移除 no-repeat 属性时它是重叠的，它应该是一个相邻的
@HarshDesai 根据px中的第一张图片设置background-position
谢谢先生，我想要完全相同的输出，但应该一个接一个地重复

【解决方案2】：

试试类似的，

body {
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

Multiple Background

【讨论】：

不，它是重叠的，我希望背景重复，因为图像是徽标大小。我已经更新了图像，你可以看到结果。它是重叠的

【解决方案3】：

这是一个使用 css 制作多个背景图片的示例，CSS3 Backgrounds

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

【讨论】：

【解决方案4】：

这对我来说很神奇：

body {
background: url("images/bgInit1C.gif") no-repeat scroll 0px 0% transparent url("images/bgInit1Repeat.gif") repeat-y scroll 0px 0px;
}

使用此代码，两个图像重叠，但您可以更改它们的 x y 值以进行不同的定位。

【讨论】：

【解决方案5】：

CSS3 允许这种事情，它看起来像这样：

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

所有主要浏览器的当前版本现在都支持它，但是如果您需要支持 IE8 或更低版本，那么您可以使用的最佳方式周围是有额外的div：

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

【讨论】：

它只重复一个图像我希望两个图像一个接一个地重复

【解决方案6】：

这是工作演示。

你必须给background-position 来堆叠背景图片

body {  
    background:
      url(http://s3-media1.fl.yelpcdn.com/bphoto/y2kT6dH4XBt3hJoTsOeHKA/ls.jpg) no-repeat  top right,
      url(http://s3-media1.fl.yelpcdn.com/bphoto/lcBBwRuHvzHIVI6tors32A/ls.jpg) no-repeat top left;
  }

&lt;body&gt;&lt;/body&gt;

【讨论】：

【解决方案7】：

#sample1 {
  background-image: url(image/sample1.gif), url(image/samplle2.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

【讨论】：