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 태그 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

당신은 처음 세 개의 매개 변수를 취하면서 4 매개 변수가 완전히 불투명 최대 1.0 완전히 투명에 대한 0.0 소요 rgba()를 사용하는 데 필요한 red, blue, 사용하고자하는 색상의 green 값.

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>