집 > 기사 > 웹 프론트엔드 > 다양한 버전의 CSS 투명 불투명도 및 IE 투명도 필터 필터 사용

다양한 버전의 CSS 투명 불투명도 및 IE 투명도 필터 필터 사용

不言원래의: 2018-06-28 11:38:551696검색

CSS3의 투명도 속성 opacity는 모든 사람이 어디에서나 사용해야 합니다. CSS3를 지원하지 않는 브라우저에서 투명도를 처리하고 브라우저 효과를 일관되게 유지하는 방법에 대해 이 문서에서는 주로 CSS 투명 불투명도에 대한 자세한 설명과 IE 버전별 투명 필터 필터의 가장 정확한 사용법을 소개합니다. 관심 있는 사람은 더 많은 것을 배울 수 있습니다.

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

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

개인 속성 -moz-opacity는 Firefox3.5+ 이전에는 더 이상 지원되지 않습니다. 이 비공개 속성인 Firefox 0.9-Firefox3는 -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 등은 모두 불투명도 투명도 속성을 지원합니다.

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

구문: # 🎜 🎜#

filter : 필터

Parameters:

filter : 사용할 필터 효과입니다. 여러 필터를 공백으로 구분하세요.

설명:

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

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

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

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

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

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

①、Alpha를 사용하면 HTML 요소가 투명한 프로그레시브 효과를 표시할 수 있습니다# 🎜🎜 #

②, Blur는 HTML 요소에 바람이 흐릿한 효과를 생성합니다

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

4, DropShadow는 HTML 요소를 만듭니다. 그림자 만들기

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

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

#🎜🎜 #7、Glow 후광을 생성합니다. 및 구성 요소 주변의 흐림 효과

8、Gray 컬러 사진을 흑백으로 전환

9、Invert 사진의 사진 생성 네거티브 효과 #🎜🎜 #

⑩, Light HTML 요소에 빛과 그림자 배치

⑪, 마스크 다른 HTML 요소를 사용하여 다른 요소에 이미지 마스크 생성 #🎜🎜 #

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

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

⑭、XRay 생성 HTML 요소의 개요는 다음과 같습니다. X-ray를 찍는 것과 같습니다

알파 필터 매개 변수 자세한 설명

①, 불투명도 불투명도, 백분율입니다. 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

이 순서를 사용하지 않으면 IE8은 IE7을 에뮬레이션하지 않습니다. IE8 및 IE7 기본은 적용하지만 불투명도를 적용하지 마십시오.

위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

다양한 버전의 CSS 투명 불투명도 및 IE 투명도 필터 필터 사용

관련 기사