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 position属性或使用其他方法执行此操作。请帮忙。谢谢

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

您可以更改z-index以显示您要在前面显示哪个div标记，哪个div位于中间等。

如果你不知道z-index做了什么，这里是我将黑色div设置为z-index:3的示例。你可以看到它们都处于相同的位置，但黑色div现在位于另一个2的前面：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

好吧，您可以将三个DIVs的位置设置为absolute并设置top＆amp; left使用相同的值，例如：

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

或者，如果您只想拥有一个DIV，则可以为该一个DIV设置多个背景图像，如下所示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: