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

我有三个图像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位置属性或使用其他方法来做到这一点。请帮忙。谢谢

来源

2016-07-05 shfkktm

你能证明你有试过吗？使用ATTR？ – guradio

问题更新与位置attr ..请检查 – shfkktm

您的div在您的CSS使用类的ID？尝试使用绝对所有你的风格 – guradio

我想你想要这样的东西。只需添加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。

来源

2016-07-05 03:53:37

你应该提到'position：absolute'要求父容器（包含a，b，c div）是'position：relative'或'position：absolute' - 它不能被保留在默认位置：static '。否则，一个优秀，清晰，写得很好的答案 - +1 – gibberish

谢谢，我已经将它添加到答案:) –

那么，你可以设置三个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>

来源

2016-07-05 03:58:33

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

回答

相关问题