png 이미지와 png 배경을 투명하게 만드는 방법 (다중 브라우저 지원)

png 이미지와 png 배경을 투명하게 만드는 방법 (다중 브라우저 지원)_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:46:57

원래의

1489명이 탐색했습니다.

IE6에서 PNG 투명 배경을 지원하는 JS 프로그램이 있지만 CSS를 사용하는 것이 그리 편리하지는 않습니다. 사용되는 것은 IE5.5의 AlphaImageLoader 필터입니다.
배경이 투명한 1.png
해결책:

코드 복사 코드는 다음과 같습니다. 다음:

 
#div1 { 
높이: 600px; 
폭: 260px; 
배경 반복: 반복 
html> body #div1 { 
배경-반복: 반복;배경-이미지: url(bj1.png); 
} 
* #div1 {필터: progid:DXImageTransform.Microsoft.AlphaImageLoader(활성화= true, sizingMethod =scale, src="bj1.png") 
} 

 
추가: IE 브라우저에서 필터를 정의하기 위해 IE에서만 인식되는 와일드카드 문자(*) 

Firefox, Opera PNG 투명 이미지를 완벽하게 지원하는 브라우저는 하위 선택기(>)도 지원합니다.
구문:
필터: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled, sizingMethod=sSize, src=sURL)
속성 :
활성화됨: 선택 사항입니다. 부울. 필터가 활성화되어 있는지 여부를 설정하거나 검색합니다. true | false
　　　true : 기본값입니다. 필터가 활성화되었습니다.
false: 필터가 비활성화됩니다.
크기 조정 방법: 선택 사항입니다. 끈. 필터링된 개체의 이미지가 개체 컨테이너의 경계 내에서 표시되는 방식을 설정하거나 검색합니다. 자르기 : 개체 크기에 맞게 이미지를 자릅니다.
이미지: 기본값입니다. 그림의 크기에 맞게 개체의 크기 범위를 늘리거나 줄입니다.
크기 조정: 개체의 크기 경계에 맞게 이미지 크기를 조정합니다.
소스: 필수입니다. 끈. 절대 또는 상대 URL 주소를 사용하여 배경 이미지를 지정합니다. 이 매개변수를 생략하면 필터가 적용되지 않습니다.

2.png 이미지는 투명합니다
웹 페이지에 png 이미지를 직접 삽입하고 투명하게 만들고 싶다면 전체에 직접 삽입된 png 이미지를 모두 다음 js 코드에 추가하면 됩니다. 페이지를 투명하게 만들 수 있습니다. :

코드 복사 코드는 다음과 같습니다.

< script 언어="JavaScript">

function CorrectPNG() // Win IE 5.5 및 6에서 PNG 투명도를 올바르게 처리합니다. 
{ 
var arVersion = navigator.appVersion.split("MSIE") 
var version = parseFloat(arVersion[1 ]) 
if ((version >= 5.5) && (document.body.filters)) 
{ 
for(var j=0; j { 
var img = document.images[j] 
var imgName = img.src.toUpperCase() 
if (imgName.substring(imgName.length-3, imgName.length) == "PNG" ) 
{ 
var imgID = (img.id) ? "id='" img.id "' " : "" 
var imgClass = (img.className ) ? "class='" img.className "' " : "" 
var imgTitle = (img.title) ? "title='" img.title "' " : "title='" img.alt "' " 
var imgStyle = "display :inline-block;" img.style.cssText 
if (img.align == "left") imgStyle = "float:left;" imgStyle 
if (img. align == "right") imgStyle = "float:right;" imgStyle 
if (img.parentElement.href) imgStyle = "cursor:hand;" imgStyle 
var strNewHTML = " "  " 너비:" img.width "px; 높이:" img.height "px;" imgStyle ";" 
 "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
 " (src='" img.src " ', sizingMethod='scale');">" 
img.outerHTML = strNewHTML 
j = j-1 
} 
 } 
} 
} 
window.attachEvent("onload", rightPNG) 