IE, FireFox, Opera 브라우저 구문 분석은 Alpha 투명도 방법을 지원합니다.

이 장에서는 IE, FireFox 및 Opera 브라우저가 Alpha 투명성을 어떻게 지원하는지 분석합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 다음 코드를 보세요.

코드는 다음과 같습니다.

filter:alpha(opacity=50);       /* IE */  
-moz-opacity:0.5;              /* Moz + FF */  
opacity: 0.5;           /* 支持CSS3的浏览器（FF 1.5也支持）*/

간단하게 설명하면 IE는 개인 속성 필터:alpha(불투명도), Moz Family는 개인 속성 -moz-opacity를 사용하고 표준 속성은 불투명도입니다(CSS 3, Moz Family는 CSS3를 부분적으로 지원합니다). 다음 값은 투명도이며, 백분율 또는 소수(알파(불투명도))를 사용합니다. 실제로는 백분율인 0보다 크고 100보다 작은 값을 사용합니다.

위 코드에서는 Opera가 보이지 않습니다. 그렇습니다. Opera는 아직 표준 불투명도를 지원하지 않으며 알파 투명도를 지원하는 자체 개인 속성도 없습니다.

그러나 Opera는 Alpha 투명 PNG 이미지를 지원한다는 것을 알고 있습니다(물론 Moz Family도 이를 지원합니다). 따라서 배경 이미지를 사용하여 알파 투명도를 얻을 수 있습니다.

예: http://realazy.org/lab/alpha/

키:

코드는 다음과 같습니다.

background: transparent url(alpha80.png) left top repeat!important;  
background: #ccc;  
filter:alpha(opacity=50);

Moz Family는 Alpha 투명 PNG를 지원하므로 개인 속성을 사용할 필요가 없습니다. 물론 표준 불투명도를 사용할 수 있지만 알파 투명 이미지와 불투명도를 동시에 사용하지 마십시오. 그렇지 않으면 둘이 혼합됩니다. 위 예제를 다운로드하여 /*opacity: .5;*/ 주석을 보시면 됩니다.