HTML/CSS에서 투명한 배경의 오버레이를 만드는 방법은 무엇입니까?

HTML/CSS에서 투명한 배경으로 오버레이 만들기

배경 위에 팝업 상자가 나타나는 오버레이 효과를 만드는 것이 목표입니다. 내용이 어두워지고 외관이 어두워집니다. 그러나 컨테이너에 불투명도를 적용하면 팝업 상자에도 영향을 줍니다.

해결책

원하는 효과를 얻으려면 배경색과 함께 불투명도를 활용하세요. 컨테이너용 CSS에서:

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

• background-color는 컨테이너의 투명 색상을 설정합니다.
• rgba()는 rgba(r, g, b, a) 여기서 r, g, b는 빨간색, 녹색 및 파란색 값이고 a는 불투명도입니다(0은 완전히 투명함).

이제 팝업 상자의 경우:

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

이 접근 방식을 사용하면 팝업 상자의 가시성을 유지하면서 배경을 어둡게 하여 원하는 오버레이 효과를 얻을 수 있습니다.

위 내용은 HTML/CSS에서 투명한 배경의 오버레이를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!