將三個背景圖像放在相同的位置

我有三個圖像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

將三個背景圖像放在相同的位置

回答

相關問題