不透明度和图层问题

Question

我想将不透明度应用于屏幕顶部的白色矩形（.header），但出于某种原因，不透明度应用于所有元素（徽标和菜单项）。我尝试使用z-index，但这并没有帮助。我怎么能解决这个问题？非常感谢

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

这是一个常见的问题。不透明度应用于所有子元素。解决方法是使用rgb颜色代码。我将以0.6不透明度的黑色背景为例。

/* 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)";

Answer 2

从opacity: 0.4移除background-color:#FFF和.header，然后申请：

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

不透明度样式整个元素及其后代，将背景颜色设置为包含alpha组件可以修复此问题。

使用我的translucent color equivalence tool，您可以为不支持Alpha透明度的浏览器找到合适的后备颜色（尽管如今，几乎所有现代浏览器都支持此功能，如果他们没有，那么＆＃ 39;无论如何，您的网站可能会出现故障。只需在您的绿色背景下混合白色和0.4不透明度，您就可以合理地模拟半透明的颜色。

我无法访问您的背景图片颜色，但鉴于它大致是石灰色，我的工具找到了适当的后备：

rgb(133,231,211)