불투명 투명 필터를 위한 IE 호환 솔루션
- php中世界最好的语言원래의
- 2018-03-22 14:47:262629검색
이번에는 불투명 투명 필터에 대한 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!
추천 도서:
HTML5+CSS3 로딩 진행률 표시줄 및 다운로드 진행률 표시줄 구현
위 내용은 불투명 투명 필터를 위한 IE 호환 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!