<div>有三个背景图片

Question

我需要在div中放置三个不同的背景图像。在顶部我想要blue.png，然后在中间yellow.png（有repeat-y），最后是red.png在底部。

到目前为止，我有这个小提琴：http://jsfiddle.net/nwUPU/1437/。我的问题是yellow.png涵盖了blue.png和red.png。我做错了什么，拜托？

此示例用于响应式设计。我不知道图像的宽度和高度。

.colors {
  width:600px;
  height:600px;
  position: relative;
  z-index: 2;
  background: url("http://s9.postimg.org/47v6naitr/blue.png") center top no-repeat, url("http://s1.postimg.org/fgv3q86i7/red.png") center bottom no-repeat;
  background-size: 100%;
}
.colors:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("http://s24.postimg.org/hyhdhfg51/yellow.png") center top repeat-y;
  background-size: 100%;
}

Answer 1

通过将多个背景提供为background属性的逗号分隔值，可以将多个背景添加到同一个元素。提供的每个背景图像都将作为图层添加，并将一个堆叠在另一个上面（也取决于background-position）。

这里要注意的关键事项是：

• 当多个背景应用于同一元素时，第一个是最顶层，最后一个是最底层。由于我们需要黄色低于红色和蓝色，因此应将其作为最后一个值提供。
• 要将蓝色和红色图像定位在各自的位置，应适当设置background-position。由于蓝色应该是从顶部开始的第一个，因此它应该位于0% 0%，因为红色需要从顶部开始，所以它应该位于100% 100%。

＆＃13;

＆＃13;

.colors {
  width: 600px;
  height: 600px;
  position: relative;
  background: url("http://s9.postimg.org/47v6naitr/blue.png") center top no-repeat,
              url("http://s1.postimg.org/fgv3q86i7/red.png") center bottom no-repeat,
              url("http://s24.postimg.org/hyhdhfg51/yellow.png") center top repeat-y;
  background-size: 100%;
  background-position: 0% 0%, 100% 100%, 0% 0%;
}

＆＃13;

<div class="colors"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

可能会在您的第一个内部添加三个div。每个人都有自己的.png？

<div>
    <div id="blue" style="z-index: 1;"><img src="blue.png"></div>
    <div id="yellow"style="z-index: 2;"><img src="yellow.png"></div>
    <div id="red" style="z-index: 1;"><img src="red.png"></div>
</div>