不透明度和图层问题

我想将不透明度应用于屏幕顶部的白色矩形（.header），但由于某些原因，不透明度会应用于所有元素（徽标和菜单项）。我试图玩Z指数，但没有帮助。我怎么能解决这个问题？非常感谢不透明度和图层问题

enter image description here

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; 
}

来源

2014-10-26 Greg

这是一个常见的问题。不透明度适用于所有子元素。解决方法是使用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)";

来源

2014-10-26 22:41:11

卸下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透明度的浏览器的适当回退颜色（尽管今天，几乎所有现代浏览器都支持此功能，如果不支持，则很可能您的网站会显示为损坏而不管）。简单地将白色与0.4的不透明度混合在您的绿色背景中，您就可以合理模拟半透明的颜色。

我没有访问到您的背景图像的颜色，但由于它的大致石灰颜色的，我想通工具的适当回落：

rgb(133,231,211)

来源

2014-10-26 22:41:58 ReactingToAngularVues

不透明度和图层问题

回答

相关问题