Platzieren drei Hintergrundbilder in der gleichen Position

Question

Ich habe drei Bilder img1.png, img2.png, img3.png mit Höhen 600px, 400px und 200px jeweils. Ich möchte diese Bilder an der gleichen Stelle wie img1.png im Hintergrund, img2.png im mittleren und img3.png im Vordergrund platzieren. Ich habe versucht, mit CSS-Position Attribute, aber nicht funktioniert. Ich habe für drei divs Bilder als Hintergrund platziert:

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

Wie können wir dies mit CSS-Position Attribute oder andere Methode verwendet. bitte hilfe. Danke

Answer 1

Ich denke, dass Sie etwas so wollen. Fügen Sie einfach 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>

Sie können den Z-Index ändern, die div Tag zu zeigen, dass Sie vor zeigen wollen, die div in der Mitte usw. sein

Wenn Sie nicht wissen, was Z-Index tut, hier ist ein Beispiel, wenn ich den schwarzen div auf z-index:3 setze. Wie Sie sehen können sie alle in der gleichen Position sind, aber die schwarze div ist jetzt vor dem anderen 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>

Ein weiteres Extra Sache von @gibberish erwähnt ist, dass das äußere Element, das enthält alle 3 div sollte position:absolute oder position:relative sein. Dies liegt daran, dass der Standardwert position für ein beliebiges HTML-Element static ist, wenn er nicht explizit angegeben wird.

Answer 2

Nun, Sie Position der drei DIVs zu absolute und setzen ihre top & left auf die gleichen Werte, wie dies einstellen:

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

Oder, wenn Sie nur ein DIV haben wollen, können Sie setze mehrere Hintergrundbilder für diesen einen DIV, so.

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