不透明度和图层问题

时间:2014-10-26 22:28:55

标签: html css

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

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

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分: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)