Css不透明度属性

Question

質問が1つあります。次に例を示します。

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の後ろにはまだh1liタグ。 rgba()の使用に関する

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>

どのように？

Answer 2

あなたは最初の3つのパラメータは、使用したい色のred、blue、​​値をとりながら、4番目のパラメータは、完全に不透明なため1.0まで完全に透明のため0.0を取るrgba()を、使用する必要があります。

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>