CSS嵌套:不透明度

Question

我有一个嵌套问题.标题设置为不透明度为0.75,并且由于徽标和mainNav嵌套在标题之后,两者都共享不透明度,我需要它们的不透明度为1.

#header {
position: relative;
padding: 0 0 0 0;
margin: 0 0 0 0!important;
background-color: black !important;
opacity: 0.75;
}

#logo {
display: inline-block;
margin: 0px 0 0 0;
float: left;
padding: 0;

}

#mainNav {
right: 250px;
position: absolute;
top: 79%;
height: 20px;
margin-top: -10px;
display: inline-block;
font-family: "Oswald";

}

这是您尝试的网站.(我试过添加

不透明度:1!重要)但没有运气.

Answer 1

CSS opacity属性更改了元素及其子元素的不透明度.相反,使用rgba颜色(带有后备)作为背景,以便只有标题背景是透明的.

#header {
    background-color: black; /* Old browsers that don't support rgba */
    background-color: rgba(0, 0, 0, 0.75);
}