html - Z-index issues not sure what to do now -

how make h1 , img elements "appear" ontop of opaque div contained in? mean, how make not being affected opaque-ness of parent div?

fiddle:

<div id="main"> <div id="seethru">        <img ... />        <h1>hi</h1>     </div> </div>  #main {     background-color: green; } #seethru {     width: auto;     height: auto;     opacity: 0.4;     background-color: blue;  } #seethru img, h1 {     position: relative;     z-index: 9999;     color: white;  } 

so far nothing working, , can't separate content, must inside opaque div

you using opacity property make it's child elements opaque too, in order prevent use rgba(0, 0, 255, .4) , prevent child elements opaque.

explanation rgba : rgba() nothing pure rgb(red, green, blue) additional parameter of a alpha, nothing opacity, can use alternative when dealing background colors

demo

there few workarounds can prevent child elements getting opaque, example

for details on browser support of rgba (for ie, can use css3 pie)

note: when use background-color: rgba() remember use fall color declared using hex or pure rgb non-supportive browsers won't fail render @ least base color without opacity, alternatively can use transparent png's background background-repeat property(but 90's way do) ;)

as @adrift commented, can read here, why child elements opaque too