CSS diğer arka plan öğelerinin üst kısmındaki div öğesinin arka plan görüntüsünü göster

Question

Bunun mümkün olup olmadığından emin değilim, ancak kodumdaki öğelerin z-endeksi ile başarıya ulaşmadan oynamayı denedim.

CSS'de bir arka plan görüntüsü ayarlanmış bir div öğem var. divun içinde, div ve img gibi başka elementlerim var. Arka plan görüntüsünün üstte kalmasını sağlayan ana div'a sahip olmaya çalışıyorum, çünkü bu arka plan görüntüsünün diğer öğelerin üstünde gösterilmesini istiyorum (bu arka plan resminin, resmin üst kısmında görünmesini istediğim yuvarlak köşeler var) bu div içinde).

örnek HTML:

<div id="mainWrapperDivWithBGImage"> 
    <div id="anotherDiv"> 
     <!-- show this img behind the background image 
     of the #mainWrapperDivWithBGImage div --> 
     <img src="myLargeImage.jpg" /> 
    </div> 
</div> 

Örnek CSS:

/* How can I make the bg image of this div show on top of other elements contained 
    Is this even possible? */ 

#mainWrapperDivWithBGImage { 
    background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent; 
    height: 248px; 
    margin: 0; 
    overflow: hidden; 
    padding: 3px 0 0 3px; 
    width: 996px; 
} 

Answer 1

I içinde buna üzerinde background: url("myImageWithRoundedCorners.jpg"); grubu ile kesinlikle bir konuma sahip olan z-index: 100; aralığı (veya açıklıkları) koymak

#mainWrapperDivWithBGImage.

Answer 2

Yuvarlatılmış köşeler için arka plan görüntüsünü kullanıyorsanız, arka plan görüntüsünün yuvarlatılmış köşelerinin görünür olması için yeterli alan sağlamak üzere ana divun dolgu stilini artırmayı tercih ederim. Ana div tarzı dolgu artan

Dene:

#mainWrapperDivWithBGImage 
{ 
    background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent; 
    height: 248px; 
    margin: 0; 
    overflow: hidden; 
    padding: 10px 10px; 
    width: 996px; 
} 

P.S.: Ben yuvarlatılmış köşeler 10px çapındaki var galiba.

Answer 3

<div id="mainWrapperDivWithBGImage">'un üç div olarak yapılması, iki dış divın yuvarlatılmış köşelerdeki görüntüleri tutması ve orta divın yuvarlak köşeli resimlerle eşleşmesi için arka plan renginin olması. Sonra sadece orta div içinde diğer elemanları yerleştirebilir veya verebilir: Sonra

#outside_left{width:10px; float:left;} 
#outside_right{width:10px; float:right;} 
#middle{background-color:#color of rnd_crnrs_foo.gif; float:left;} 

HTML:

<div id="mainWrapperDivWithBGImage"> 
    <div id="outside_left><img src="rnd_crnrs_left.gif" /></div> 
    <div id="middle"> 
    <div id="another_div"><img src="foo.gif" /></div> 
    <div id="outside_right><img src="rnd_crnrs_right.gif" /></div> 
</div> 

Sen pozisyon yapmak gerekebilir: bağıl; ve benzeri.