CSS가 배경을 투명하게 하고 텍스트를 불투명하게 만드는 방법의 예

일부 웹페이지를 디자인하고 만들 때 반투명 효과를 사용하는 경우가 있습니다. 우선 PNG 이미지 처리를 사용하는 것이 좋은 방법이지만 유일한 호환성 문제는 ie6에서의 문제입니다. 역시 어렵지 않습니다. js 처리 부분만 추가하면 됩니다. 그러나 로그인 상자, 등록 상자, 프롬프트 등과 같은 반투명 마스크 팝업 레이어가 필요한 경우 배경 타일을 사용하는 경우 전체 페이지를 반투명 마스크 레이어로 덮어야 할 수도 있습니다. , 현재로서는 이는 좋은 생각이 아닙니다. 이미지가 클수록 로딩 속도에 영향을 미치며, 이미지가 작을수록 페이지의 렌더링 계산량이 늘어납니다.

다음과 같은 예가 있다고 가정합니다. "DIV 블록이 있습니다. 이 DIV는 검은색이고 반투명하지만 이 DIV 내부의 내용은 그대로 유지되어야 하며 투명할 수 없습니다." 그러면 어떻게 해야 합니까?

HTML 부분을 이렇게 작성했다면

<div class="touMingDiv">  
    <div>  
        <h1>这是透明的层这是透明的层这是透明的层这是透明的层  
            这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层  
        </h1>  
    </div>  
    <p>  
        这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome  
    </p>  
    <img src="bg.jpg"/>  
</div>

CSS는 이렇게 작성할 수도 있겠네요

.touMingDiv{  
    filter:Alpha(opacity=60);  
    opacity:0.6;  
}

그런데 테스트해본 결과 div 컨테이너뿐만 아니라 div 안에 있는 텍스트와 그림도 반투명한 것을 발견했습니다. 투명하게 만들었습니다. 이러한 효과는 이러한 필터의 속성이 하위 요소에 상속되었기 때문에 발생합니다.

다음 방법을 사용하여

.touMingDiv{  
    width:800px;  
    min-height:300px;  
    color:#fff;  
    background:rgba(0,0,0,0.6);  
    background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
    filter:Alpha(opacity=60);/*只对ie7,ie8有效*/  
}  
.touMingDiv p,  
.touMingDiv div,  
.touMingDiv img{  
    position:relative;  
    /*或者是absolute，都可以使文字不透明，这样做还是为了  
    兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/  
}

위의 배경:rgba(0,0,0,0.6)은 ie6을 제외한 ie9, ie10, FF, Chrome... 등에 대해서만 유효합니다. .IE7, IE8이므로 다음과 같은 몇 줄의 코드가 있습니다.

background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
filter:Alpha(opacity=60);/*只对ie7,ie8有效*/

또한 하위 요소에 상대 또는 절대 속성을 설정해야 배경이 투명해지고 배경의 텍스트와 그림이 투명해질 수 있습니다. 정상적으로 표시됩니다.

하지만 여기 코드는 확실히 ie6에는 적합하지 않습니다. ie6에서는 png 이미지를 사용한 후 js를 사용하여 처리하는 것이 좋습니다.

위 내용은 CSS가 배경을 투명하게 하고 텍스트를 불투명하게 만드는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!