CSS 투명도 속성(코드)에 대한 자세한 설명

이 글에서는 CSS 투명 속성에 대한 자세한 설명과 배경 투명도 상속 해결 방법을 소개합니다. CSS 투명 배경을 사용하는 경우 이 글은 많은 비호환성 문제를 해결하는 데 도움이 될 수 있습니다.

투명성은 종종 좋은 결과를 낳습니다. 웹 페이지 시각 효과를 위해 먼저 주류 브라우저와 호환되는 CSS 투명 코드를 제공합니다.

코드는 다음과 같습니다.

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

위 속성은 다음과 같습니다.

opacity: 0.5; 이는 CSS 표준이므로 가장 중요합니다.

filter:alpha(opacity=50); 값의 범위는 0~100이고 나머지 3개는 0~1입니다.

-moz-opacity:0.5; 이는 일부 이전 버전의 Mozilla 브라우저를 지원하기 위한 것입니다.

-khtml-opacity: 0.5; 이는 일부 이전 버전의 Safari 브라우저를 지원하기 위한 것입니다.

CSS 투명도 상속 문제:

CSS 투명도 속성에는 상속 문제가 포함됩니다. 상위 요소에 투명도가 설정되면 하위 요소는 투명도를 설정하더라도 자동으로 투명도를 상속합니다. 하위 요소를 다시 투명도로 지정하는 것도 유효하지 않습니다.

하위 요소가 텍스트인 경우 내 해결책은 일반적으로 명확하게 볼 수 있는 한 그대로 두는 것입니다. 또 다른 절충안은 텍스트 하위 요소에 상대적으로 더 어두운 색상을 할당하는 것입니다. 즉, 하위 요소가 투명도를 상속하면 결과 텍스트 색상이 정확히 원하는 색상이 됩니다. 전제는 이 색상이 여전히 심화될 가능성이 있으며 색상 및 투명도 값을 자세히 계산해야 한다는 것입니다.

'투명성 상속 취소'라는 말도 있는데 별로 정확하지 않습니다. 개인적으로 아는 한 투명성 상속을 취소할 수 있는 방법은 없습니다. "여러 요소를 덮고 지정된 요소만 투명하게 만드는" 것을 달성하고 싶을 때 사용할 수 있는 몇 가지 해킹이 있다고 말할 수 있습니다.

검색 끝에 이 효과를 얻을 수 있는 좋은 방법을 찾았습니다. 관심 있는 친구들은 한 번 살펴보세요. 원리는 매우 간단합니다. 빈 요소를 투명 레이어로 추가하고, 투명해지기를 원하지 않지만 가리는 효과를 얻으려는 요소는 형제 요소입니다. 상위 요소는 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가 있습니다.

위 내용은 CSS 투명 속성 상세 설명(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 홈페이지의 다른 관련 글을 참고해주세요!