IE ff Opera가 알파 투명성을 동시에 지원하도록 만드는 방법

IE ff Opera가 알파 투명성을 동시에 지원하도록 만드는 방법_경험 교환

WBOY

풀어 주다： 2016-05-16 12:04:41

원래의

1044명이 탐색했습니다.

오늘은 CSS Alpha 투명성에 대해 함께 배워보겠습니다.
CSS Alpha 투명성에 대한 관련 지식. 먼저 다음 코드를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

filter:alpha(opacity= 50); /* IE */ 
-moz-opacity:0.5; /* Moz + FF */ 
opacity: 0.5; /* CSS3를 지원하는 브라우저(FF 1.5도 지원) ) */ 
 

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

위 코드에서는 Opera가 보이지 않습니다. 그렇습니다. Opera는 아직 표준 불투명도를 지원하지 않으며 알파 투명도를 지원하는 자체 개인 속성도 없습니다.
그러나 우리는 Opera가 Alpha 투명 PNG 이미지를 지원한다는 것을 알고 있습니다(물론 Moz Family도 이를 지원합니다). 따라서 배경 이미지를 사용하여 알파 투명도를 얻을 수 있습니다.

키는

코드 복사 코드는 다음과 같습니다.

배경:투명 URL(alpha80.png) 왼쪽 상단 반복!중요; 
배경:#ccc; 
filter:alpha(opacity=50) 

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