CSS transparency goes through other layers

Question

I have a question ... I have a header class like this

.header{ background-color:#626262; width:250px; height:745px; opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } 

inside this class i have these classes ...

 .logo{ background-color:#626262; opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ color:#FFF; font-size:28px; padding-top:125px; margin-left:20px; } .navigation{ background-color:#626262; opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ color:#FFF; margin-left:20px; text-align:left; margin-bottom: 125px; } .navigation ul{ list-style:none; padding-left:0; padding-top:35px; } .navigation ul li{ padding-bottom:20px; font-size:24px; } .navigation li a{ color:#FFF; text-decoration:none; } .social{ width:100%; font-size:18px; height: 50px; line-height: 72px; padding-right: 10px; } .social ul { list-style-type: none; margin: 0; padding: 0 0 0 8px; } .social li { float: left; } .social ul .facebook a { color: #FFFFFF; display: block; text-decoration: none; background-image: url(http://jamessuske.com/karl/images/facebook.png); background-position: center right; background-repeat: no-repeat; padding-right:65px; } .social ul .facebook a:hover { background-image: url(http://jamessuske.com/karl/images/facebook_hover.png); } .social ul .twitter a { color: #FFFFFF; display: block; text-decoration: none; background-image: url(http://jamessuske.com/karl/images/twitter.png); background-position: center right; background-repeat: no-repeat; padding-right:70px; } .social ul .twitter a:hover { background-image: url(http://jamessuske.com/karl/images/twitter_hover.png); } .social ul .pinterest a { color: #FFFFFF; display: block; text-decoration: none; background-image: url(http://jamessuske.com/karl/images/pinterest.png); background-position: center right; background-repeat: no-repeat; padding-right:70px; } .social ul .pinterest a:hover { background-image: url(http://jamessuske.com/karl/images/pinterest_hover.png); } 

And these layers disappeared to an opacity of 0.4 .... my question is, how do I get that the layers are not washed out with an opacity of 0.4? Hope this makes sense ... an example of this would be http://www.yourthirdeye.ca/

Answer 1

If it's just for a partially transparent background, you can use rgba() , for example:

 .header{ background-color: #626262; background-color: rgba(98, 98, 98, 0.4); width:250px; height:745px; } 

This will not work in older browsers (e.g. IE8 and earlier versions), so why is background-color set twice - the first is fallback.

There are also some css tricks you can use, but they have disadvantages. If the above solution works for you, I would go with that.

If not, these links should start:

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/