Question

css代码

[1,2,3,4].inject(0) do |count,value|
    if value % 3 == 0
       count = count + 1
    end
end

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

Answer 1

尝试这样的事情

＆＃13;

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

＆＃13;

参考： Using CSS multiple backgrounds

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

＆＃13;

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

＆＃13;

Answer 2

尝试类似的事情，

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

Multiple Background

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

Answer 4

这对我来说很有意义：

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

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

Answer 5

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

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

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

{{1}}

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

<body></body>

Answer 7

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

如何提供两个备用背景图像？

7 个答案: