불투명 투명 필터를 위한 IE 호환 솔루션-CSS 튜토리얼-php.cn

이번에는 불투명 투명 필터에 대한 IE 호환 솔루션을 가져오겠습니다. 불투명 투명 필터 사용 시 주의사항은 무엇인가요?

CSS3 투명도 속성 불투명도모든 사람이 어디에서나 사용해 본 적이 있을 것입니다. CSS3를 지원하지 않는 브라우저를 투명하게 처리하고 일관된 브라우저 효과를 유지하는 방법에 대해서는 누구나 쓸 수 있다고 생각합니다. 그러나 필터의 구체적인 문법적 의미와 각 버전의 다른 작성 방법에 관해서는 많은 사람들이 그렇지 않습니다. 정확합니다. 그룹 내 많은 전문가들에게 물어봤지만 어느 누구도 매우 정확하지 않으며 인터넷상의 의견은 더욱 다양합니다. 오늘은 이 속성을 주로 검토하고, 올바른 작성 방법과 다양한 IE 버전의 지원 및 작성 차이점을 설명하기 위해 실제 테스트를 수행합니다.

우선, Opacity 속성은 요소의 투명도를 설정하는 데 사용됩니다. 값 범위는 0에서 1 사이이며 음수가 될 수 없습니다. 불투명도 값 1은 완전히 불투명하고 값 0은 완전히 투명하여 시각적으로 보이지 않습니다. 불투명도 속성과의 브라우저 호환성에 대해서는 아래를 계속 읽어보세요.

개인 속성 -moz-opacity는 Firefox 3.5+에서 더 이상 지원되지 않습니다. Mozilla 1.7(Firefox 0.9) 이전에는 FF가 이 개인 속성을 사용했습니다. -moz-opacity 및 opacity 속성을 모두 사용합니다. 이제 제가 처음 직장에 들어섰을 때를 생각해보면 Firefox가 3.5로 업그레이드된 직후에 페이지 투명도 효과 중 일부가 갑자기 사라지고 이제 CSS3가 압도적으로 시간이 흘러가는 것을 한탄합니다. 파리.

IE9+에서는 CSS3 불투명도만 지원하기 시작했으며 IE6-IE8에서는 이를 구현하기 위해 필터 속성을 사용하는 데 익숙합니다. IE4-IE9는 모두 progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

IE8에 필터 쓰기 방법을 지원합니다. IE는 이 쓰기 방법이 이전 쓰기 방법에 대한 수정이며 더 많은 기능을 수행한다고 믿습니다. 사양에 따라 이 쓰기 방법의 속성 값에는 따옴표 쌍만 있으며 효과는 이전과 동일합니다. 그러나 이 쓰기 방법은 수명이 짧습니다. IE10부터 filter 및 -ms-filter는 더 이상 지원되지 않습니다.

Safari 1.2 이전 버전은 khtml의 브라우저 커널을 기반으로 했습니다. 1.2 버전 출시 이후에는 -khtml-opacity 작성 방법이 더 이상 지원되지 않으며 -khtml-opacity가 역사가 되었습니다.

Konqueror는 -khtml-opacity를 지원한 적이 없으며 버전 4.0부터 불투명도를 지원했습니다.

IE 외에도 현재 주류 브라우저인 Opera 9.0+, Safari 1.2(WebKit 125)+, Chrome 등은 모두 불투명도 투명도 속성을 지원합니다.

IE는 버전 4.0부터 내장된 multimedia 필터 효과를 제공합니다. 구체적인 사용 방법은 다음과 같습니다.

구문:

filter : filter

매개변수:

filter : 거울 효과에 사용할 필터 . 여러 필터를 공백으로 구분하세요.

지침:

1. 개체에 적용된 필터 효과를 설정하거나 검색합니다.

2. 이 속성을 사용하려면 개체에 높이, 너비, 위치 세 가지 속성 중 하나가 있어야 합니다.

3. 필터 메커니즘은 확장 가능합니다. 타사 필터를 개발하여 사용할 수 있습니다.

4. 이 속성은 MAC 플랫폼에서 사용할 수 없습니다.

5. 해당 스크립트 기능은 필터입니다.

IE4.0 이상에서는 다음 14가지 필터를 지원합니다.

1, HTML 요소에 투명하고 점진적인 효과를 표시하는 Alpha

2, HTML 요소에 바람에 의해 흐린 효과가 나타나는 Blur

3 , Chroma 이미지의 특정 색상을 투명하게 만듭니다

4, DropShadow HTML 요소에 그림자를 적용합니다

⑤, FlipH HTML 요소를 가로로 뒤집습니다

⑥, FlipV HTML 요소를 세로로 뒤집습니다

7, Glow 컴포넌트 주위에 후광 및 흐림 효과 생성

8, 회색 컬러 사진을 흑백으로 바꾸기

9, 반전 사진의 네거티브 사진 효과 생성

⑩, 라이트 HTML에 빛과 그림자 배치 component

⑪、마스크 다른 HTML 요소를 사용하여 다른 요소에 이미지 마스크를 생성합니다

⑫, Shadow 좀 더 입체적인 그림자 생성

⑬, Wave HTML 요소를 수평 또는 수직 웨이브 변형 생성

⑭, XRay X-ray를 찍듯이 HTML 요소의 윤곽을 생성

Alpha 자세한 설명 필터 매개변수

①, 불투명도 불투명도, 백분율. 0에서 100 사이에서 0은 완전히 투명함을 의미하고 100은 완전히 불투명함을 의미합니다.

②, FinishOpacity Opacity와 함께 사용하는 선택 매개변수입니다. Opacity와 FinishOpacity를 동시에 사용하면 투명하고 점진적인 효과를 얻을 수 있어 더욱 멋집니다. 0에서 100 사이에서 0은 완전히 투명함을 의미하고 100은 완전히 불투명함을 의미합니다.

3, 스타일 Opacity와 FinishOpacity를 동시에 설정하여 투명한 그라데이션을 생성하는 경우 주로 빨간색을 사용하여 프로그레시브 표시 모양을 지정합니다. 0: 그라데이션 없음, 1: 선형 그라데이션, 2: 원형 그라데이션, 직사각형 방사형.

4, StartX 점진적 시작의 X 좌표 값

⑤, StartY 점진적 시작의 Y 좌표 값

⑥, FinishX 점진적 시작의 X 좌표 값

7, FinishY 점진적 시작의 Y 좌표 값 점진적 종료

다음은 필터와 불투명도의 호환성을 테스트하기 위한 예입니다:

Html 코드

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>JS Bin</title>  
</head>  
<body>  
  <p class="transparent_class">测试透明度</p>  
</body>  
</html>

로그인 후 복사

참고: 테스트할 때 DOCTYPE을 작성하는 것을 잊지 마세요. 그렇지 않으면 실제 효과에서 벗어날 수 있습니다.

해당 CSS 코드:

.transparent_class {  
    /* Required for IE 5, 6, 7 */  
    /* ...or something to trigger hasLayout, like zoom: 1; */  
    width:300px;  
    height:300px;  
    line-height:300px;  
    text-align:center;  
    background:#000;  
    color:#fff;  
    /* older safari/Chrome browsers */  
    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
}

로그인 후 복사

사용 시 적용할 브라우저/버전에 따라 위에서 필요한 코드 줄을 선택할 수 있습니다. 모든 브라우저를 완벽하게 지원하려면 불투명도 또는 필터에 대한 처음 5문장이 필요합니다. 필터와 -ms-filter를 동시에 사용하려면 필터 앞에 -ms-filter를 적어야 합니다. 원래 설명은 다음과 같습니다.

IE8의 IE7 에뮬레이션 모드에서도 불투명도가 작동하도록 하려면 순서는 다음과 같아야 합니다.

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  
filter: alpha(opacity=50); // second

로그인 후 복사

이 순서를 사용하지 않으면 IE7을 에뮬레이션하는 IE8에서는 불투명도가 적용되지 않습니다. , IE8 및 IE7 기본도 가능합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!