ccs 투명 속성 및 배경 투명 상속 방법 예제에 대한 자세한 설명

투명성은 종종 좋은 웹 페이지 시각적 효과를 생성할 수 있습니다. 먼저 주류 브라우저와 호환되는 CSS 투명도 코드를 소개하겠습니다.

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

위 속성은 다음과 같습니다.
opacity: 0.5; CSS 표준. 이 속성은 Firefox, Safari 및 Opera를 지원합니다.
filter:alpha(opacity=50); 이는 IE6에 대해 설정되며 가능한 값은 0~100이고 나머지 3개는 0~1입니다.
-moz-opacity: 0.5; 이는 일부 이전 버전의 Mozilla 브라우저를 지원하기 위한 것입니다.
-khtml-opacity: 0.5; 이는 일부 이전 버전의 Safari 브라우저를 지원하기 위한 것입니다.
CSS 투명도 상속 문제
그러나 CSS의 투명도 속성에는 상속 문제가 있습니다. 상위 요소에 투명도를 설정하면 하위 요소에 투명도를 1로 지정하더라도 하위 요소가 자동으로 상속됩니다. 무효가 됩니다.
하위 요소가 텍스트인 경우 해결 방법은 일반적으로 명확하게 볼 수 있는 한 그대로 두는 것입니다. 또 다른 절충안은 텍스트 하위 요소에 상대적으로 더 어두운 색상을 할당하는 것입니다. 즉, 하위 요소가 투명도를 상속하면 결과 텍스트 색상이 정확히 원하는 색상이 됩니다. 전제는 이 색상이 여전히 심화될 가능성이 있으며 색상 및 투명도 값을 자세히 계산해야 한다는 것입니다.
투명성 상속 취소'라는 말도 있는데, 개인적으로 아는 한 투명성 상속을 취소할 수 있는 방법은 없습니다. "여러 요소를 덮고 지정된 요소만 투명하게 만듭니다"를 달성하려는 경우 사용할 수 있는 몇 가지 해킹이 있다고 말할 수 있습니다.
검색 결과 이 ​​효과를 얻을 수 있는 좋은 방법을 찾았습니다. 관심 있는 친구들은 한 번 살펴보세요. 원리는 매우 간단합니다. 빈 요소를 투명 레이어로 추가하고, 투명해지기를 원하지 않지만 가리는 효과를 얻으려는 요소는 형제 요소입니다. 상위 요소는 position:relative를 사용하여 위치가 지정되고, 두 하위 요소는 적용 범위를 달성하기 위해 position:absolute를 사용하여 위치가 지정됩니다.
html 코드:

<p class="p3"><p class="p4"></p>这里文字图片都没透明度了 
<p class="p2">图片</p> 
</p>

CSS 코드

body { 
background-image: url(./105247.png); 
background-repeat: repeat; 
} 
.p2{ width:100px; height:100px; background: url(./testbok.png)} 
.p3{ width:200px; height:200px; position:relative; margin-top:10px} 
.p4{  position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}

외부 컨테이너의 높이가 가변적이라면 p3의 높이를 충분한 높이로 설정하세요.
이 방법에는 매우 나쁜 단점이 있습니다. 공백 p가 하나 더 있습니다

위 내용은 ccs 투명 속성 및 배경 투명 상속 방법 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!