CSS3의 투명도 속성 opacity는 모든 사람이 어디에서나 사용해야 합니다. CSS3를 지원하지 않는 브라우저에서 투명도를 처리하고 브라우저 효과를 일관되게 유지하는 방법에 대해 이 문서에서는 주로 CSS 투명 불투명도에 대한 자세한 설명과 IE 버전별 투명 필터 필터의 가장 정확한 사용법을 소개합니다. 관심 있는 사람은 더 많은 것을 배울 수 있습니다.
CSS3 투명도 속성 불투명도어디서나 다들 사용해 보셨을 거라 생각합니다. CSS3를 지원하지 않는 브라우저를 투명하게 처리하고 일관된 브라우저 효과를 유지하는 방법에 대해서는 누구나 쓸 수 있다고 생각합니다. 그러나 필터의 구체적인 문법적 의미와 각 버전의 다른 작성 방법에 관해서는 많은 사람들이 그렇지 않습니다. 정확합니다. 그룹 내 많은 전문가들에게 물어봤지만 어느 누구도 매우 정확하지 않으며 인터넷상의 의견은 더욱 다양합니다. 오늘은 이 속성을 주로 검토하고, 올바른 작성 방법과 다양한 IE 버전의 지원 및 작성 차이점을 설명하기 위해 실제 테스트를 수행합니다.
먼저 Opacity 속성은 요소의 투명도를 설정하는 데 사용됩니다. 값 범위는 0에서 1 사이이며 음수가 될 수 없습니다. 불투명도 값 1은 완전히 불투명하고 값 0은 완전히 투명하여 시각적으로 보이지 않습니다. 불투명도 속성과의 브라우저 호환성에 대해서는 아래를 계속 읽어보세요.
개인 속성 -moz-opacity는 Firefox3.5 이상에서 더 이상 지원되지 않습니다. FF는 Mozilla 1.7(Firefox 0.9) 이전에 이를 사용했습니다. , Firefox 0.9-Firefox3은 -moz-opacity와 opacity 속성을 모두 지원합니다. 이제 제가 처음 직장에 들어섰을 때, Firefox가 3.5로 업그레이드된 직후에 요즘 잘 만들어진 페이지 투명도 효과 중 일부가 갑자기 사라졌습니다. , CSS3는 어디에나 있고 시간이 얼마나 빨리 가는지 한탄합니다.
IE9+에서는 CSS3 불투명도만 지원하기 시작했으며 IE6-IE8에서는 이를 구현하기 위해 필터 속성을 사용하는 데 익숙합니다. IE4-IE9는 모두 progid:DXImageTransform.Microsoft.Alpha(Opacity=xx) 필터 쓰기 방법을 지원합니다.
IE8은 특별한 -ms-filter를 도입했습니다. IE는 이 쓰기 방법이 이전 쓰기에 대한 수정이라고 믿습니다. 이 쓰기 방법의 속성 값에는 따옴표 쌍만 있으며 효과는 이전과 동일합니다. 그러나 이 쓰기 방법은 수명이 짧습니다. IE10부터 filter 및 -ms-filter가 더 이상 지원되지 않습니다.
1.2 이전의 Safari 버전은 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: filter
매개변수:
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 Turn 컬러 사진을 흑백으로
⑨, 반전 사진의 네거티브 사진 효과 연출
⑩, Light HTML 요소에 빛과 그림자 배치
⑪, Mask 다른 HTML 요소를 사용하여 다른 요소에 이미지의 마스크를 생성
⑫, Shadow 좀 더 입체적인 그림자를 생성
⑬, Wave HTML 요소가 수평을 생성하도록 하거나 수직 방향의 물결 모양 변형
⑭ XRay는 X-ray를 찍는 것처럼 HTML 요소의 윤곽선을 생성합니다
알파 필터 매개 변수에 대한 자세한 설명
①, 불투명도 불투명도, 백분율입니다. 0에서 100 사이에서 0은 완전히 투명함을 의미하고 100은 완전히 불투명함을 의미합니다.
②.FinishOpacity Opacity와 함께 사용하는 선택 매개변수로, Opacity와 FinishOpacity를 동시에 사용하면 투명하고 점진적인 효과를 얻을 수 있어 더욱 멋있습니다. 0에서 100 사이에서 0은 완전히 투명함을 의미하고 100은 완전히 불투명함을 의미합니다.
③, 스타일 Opacity와 FinishOpacity를 동시에 설정하여 투명한 그라데이션을 생성하는 경우 주로 빨간색을 사용하여 프로그레시브 표시 모양을 지정합니다. 0: 그라데이션 없음, 1: 선형 그라데이션, 2: 원형 그라데이션, 직사각형 방사형.
IV.Start >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 네이티브는 불투명도를 적용하지만 IE7을 에뮬레이션하는 IE8에서는 불투명도가 적용되지 않습니다.
위 내용이 이 글의 전체 내용이므로 도움이 되길 바랍니다. 모두의 공부에, 그리고 모두가 Duoduo에서 PHP 중국어 웹사이트를 지원하길 바랍니다.
CSS 투명 불투명도 및 IE 버전 투명 필터의 가장 정확한 사용법에 대한 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
