Css不透明属性

Question

我有一个问题。下面是例子：

nav { 
 
    width: 100%; 
 
    background: #000; 
 
    opacity: 0.8; 
 
} 
 

 
ul { 
 
    background: green; 
 
    opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    </ul> 
 
</nav> 
 
<header> 
 
    <h1>123</h1> 
 
</header>

而问题是，ul也有opacity。所有这一切我的意思是nav标签是好的，它具有0.8的不透明度，但我的ul标签不应该有不透明性，并且它不会在浏览器中查看CSS，但我仍然可以在ul之后看到h1文本，以及li标签。

Answer 1

nav { 
 
    width: 100%; 
 
    //background: #000; 
 
    //opacity: 0.8; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 

 
ul { 
 
    background: green; 
 
    //opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    </ul> 
 
</nav> 
 
<header> 
 
    <h1>123</h1> 
 
</header>

如何使用rgba()？

Answer 2

您需要使用rgba()，其中4个参数需要0.0为完全透明达1.0完全不透明，而前三个参数采用red，blue，您要使用的颜色​​值。

nav { 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.8); 
 
} 
 

 
ul { 
 
    background: green; 
 
    opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    </ul> 
 
</nav> 
 
<header> 
 
    <h1>123</h1> 
 
</header>