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>