CODEWITHSUNDEEP
htmlcsslayout
jay_t55
jay_t55

Reputation: 11662

Z-index issues not sure what to do now

How do i make the h1 and img elements "appear" ontop of the opaque div they are contained in? I mean, how do I make it look like they are not being affected by the opaque-ness of their 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 is working, and I can't separate this content, it must be inside the opaque div

Upvotes: 2

Views: 82

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157374

You are using opacity property which will make it's child elements opaque too, so in order to prevent that use rgba(0, 0, 255, .4) and that will prevent child elements to get opaque.

Explanation for rgba : rgba() is nothing but pure rgb(red, green, blue) but with an additional parameter of a which is alpha, nothing but opacity, so you can use this as an alternative when you are dealing with background colors

Demo

There are few workarounds where you can prevent child elements from getting opaque, for example

For details on browser support of rgba (For IE, you can use CSS3 Pie)

Note: When you use background-color: rgba() always remember to use a fall back color declared using a hex or pure rgb so that non-supportive browsers won't fail to render at least the base color but without opacity, alternatively you can also use transparent png's as a background with background-repeat property(But this is 90's way to do) ;)

As @Adrift Commented, You can read here, why actually the child elements get opaque too

Upvotes: 7

Alex
Alex

Reputation: 996

internet explorer up to IE8 doesn't supports the RGBA colors. So it would be better if you place h1 and img element outside the opaque div and then move it visually inside using CSS positioning.

Check out this great tutorial it will certainly solve your problem.

http://www.tutorialrepublic.com/css-tutorial/css-opacity.php

Upvotes: 0

Related Questions