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 Sprites 기술을 사용하여 둥근 모서리 효과 달성
전환 및 애니메이션 사용 소개 CSS3의 애니메이션 속성
위 내용은 다양한 버전의 CSS 투명 불투명도 및 IE 투명도 필터 필터 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
