将三个背景图像放在同一位置

Question

我有三张图片 img1.png、img2.png、img3.png，高度分别为 600px、400px 和 200px。我想将这些图像放在相同的位置，例如 img1.png 在后面，img2.png 在中间，img3.png 在前面。我尝试使用 css 位置属性，但没有用。我已将图像作为三个 div 的背景：

<div id="clouds1"></div>
<div id="clouds2"></div>
<div id="clouds3"></div>

<style>

#clouds1
{
    background:url('images/img1.png');
    height:600px;
    position:absolute;
    z-index:1;
}

#clouds2
{
   background:url('images/img2.png');
   height:400px;
   position:relative;
   z-index:8;

}

#clouds3
{
   background:url('images/img3.png');
   height:200px;
   position:relative;
   z-index:99;
}

</style>

我们如何使用 css 位置属性或使用其他方法来做到这一点。请帮忙。谢谢

Answer 1

我想你想要这样的东西。只需添加 position:absolute & z-index:

div#a {background-color:green;width:50px;height:10px;position:absolute;z-index:3;}
div#b {background-color:red;width:50px;height:30px;position:absolute;z-index:2;}
div#c {background-color:black;width:50px;height:50px;position:absolute;z-index:1;}

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

您可以更改 z-index 以显示要显示在前面的 div 标签，要显示在中间的 div 标签等。

如果你不知道z-index是干什么的，下面是我把黑色div设置为z-index:3的例子。如您所见，它们都在相同的位置，但黑色 div 现在在其他 2:

的前面

div#a {background-color:green;width:50px;height:10px;position:absolute;z-index:2;}
div#b {background-color:red;width:50px;height:30px;position:absolute;z-index:1;}
div#c {background-color:black;width:50px;height:50px;position:absolute;z-index:3;}

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

@gibberish 提到的另一个额外的事情是包含所有 3 div 的外部元素应该是 position:absolute 或 position:relative。这是因为未明确指定时任何 html 元素的默认 position 值为 static.

Answer 2

嗯，你可以将三个 DIVs 的位置设置为 absolute 并将它们的 top 和 left 设置为相同的值，如下所示：

#clouds1, #clouds2, #clouds3 {
    position: absolute;
    top: 0px; <!-- change to fit your need -->
    left: 0px; <!-- change to fit your need -->
}

或者，如果您只想拥有一个 DIV，您可以为那个 DIV 设置多个背景图像，就像这样。

.three_backgrounds {
  background: url('http://images.clipartpanda.com/free-clipart-flowers-ncByRqpcA.png') top left no-repeat, url('http://worldartsme.com/images/pink-flower-vector-clipart-1.jpg') top left no-repeat, url('http://www.clker.com/cliparts/t/G/0/p/H/d/flower-hi.png') top left no-repeat;
  background-size: 100px 100px, 50px 50px, 70px 70px;
  height: 400px;
}

<div class="three_backgrounds">
</div>

将三个背景图像放在同一位置

placing three background images in same position

html

css

jquery

position

image