HTML/CSS에서 컨테이너 불투명도를 설정할 때 하위 요소 불투명도를 유지하는 방법은 무엇입니까?

HTML/CSS에서 하위 요소 불투명도 유지

목표는 페이지 상단에 나타나는 팝업 상자를 만드는 것입니다. 배경 콘텐츠는 흐리게 표시되어 강조 표시됩니다. . 그러나 컨테이너의 불투명도를 0.3으로 설정하면 두 div가 모두 반투명해지는 문제가 발생했습니다.

해결책: 불투명도와 함께 배경색 활용

원하는 효과를 얻으려면 배경색과 결합. 다음 코드를 고려하세요.

<code class="css">#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}
</code>

이 코드에서는 약간 다른 접근 방식이 사용됩니다.

• #container 요소는 금색 테두리와 반투명 테두리로 설정됩니다. 불투명도가 지정된 배경.
• 팝업 상자를 나타내는 #box 요소에는 은색 테두리가 지정되고 불투명도가 다르게 지정된 반투명 배경이 지정됩니다.

By 불투명도가 있는 배경색을 사용하면 하위 요소의 불투명도를 유지하면서 컨테이너의 투명도를 제어할 수 있습니다. 이렇게 하면 팝업 상자가 빛바랜 배경에서 더욱 돋보일 수 있습니다.

위 내용은 HTML/CSS에서 컨테이너 불투명도를 설정할 때 하위 요소 불투명도를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!