Issue with opacity and layers

Question

I'd like to apply opacity to the white rectangle on top of the screen (.header) but for some reason the opacity is applied to all the elements (logo and menu items). I tried to play with z-index but that didn't help. How could I fix this? Many thanks

http://jsfiddle.net/ycLqqsgr/1/

body {
    background-image: url('http://lorempixel.com/output/sports-q-c-1141-1113-2.jpg');    
}
.header {
    z-index: 999;  
    position: absolute;
    background: #fff;
    opacity: 0.4;  
    top: 35px; 
    right: 0; 
    left: 0; 
    margin: 0 auto; 
    width: 90%; 
    max-width: 1200px;      
}    
.header-wrapper {
    padding: 54px 60px;    
}    
.header-logo {
    position: absolute;
    margin-top: -40px;
}    
.header_nav {
    float: right;
    clear: none;
    font-family: 'Maven Pro', sans-serif;
    font-weight: normal;
}
.header_nav-wrapper {
    list-style: none;
}    
.header_nav-item {
    margin-left: 22px;
    float: left;
    clear: none;
}    
.header_nav-item-a {
    color: #474032;
    text-decoration: none;
}    
.header_nav-item-a:hover {
    color: #eee;
}    
.header_nav-item-a--btn {
    padding: 16px 18px;
    border-radius: 5px;
    border: 1px solid #474032;
    background-color: transparent;      
}    
.header_nav-item-a--donate {
    margin-top: -18px;
}    
.header_nav-item-a--btn:hover {
    border: 1px solid #eee;
}

Answer 1

Remove the opacity: 0.4 and the background-color:#FFF from .header and instead apply:

.header {
  background-color:rgba(255,255,255,0.4);
  background-color:rgb(133,231,211);
}

Opacity styles the entire element and its descendants, setting the background color to contain an alpha component fixes this.

Using my translucent color equivalence tool, you can find an appropriate fallback color for browsers which do not support alpha transparency (although today, almost all modern browsers have support for this feature, if they don't, it's likely your site will appear broken regardless). Simply mix white with 0.4 opacity against your green background and you'll be able to reasonably simulate a translucent color.

I don't have access to your background image color, but given it's roughly lime-colored, my tool figured an appropriate fallback of:

rgb(133,231,211)

Answer 2

That's a common problem. The opacity is applied to all child elements. A workaround is to use rgb color codes. I will give an example with a black background at 0.6 opacity.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";