我想将不透明度应用于屏幕顶部的白色矩形(.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;
}
答案 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)