다양한 브라우저_자바스크립트 기술에서 PNG 배경 적용-JS 튜토리얼-php.cn

다양한 브라우저_자바스크립트 기술에서 PNG 배경 적용

WBOY

풀어 주다： 2016-05-16 18:51:16

원래의

1051명이 탐색했습니다.

1. IE6에서 PNG 배경 사용
IE6 자체는 PNG 이미지의 투명도 기능을 인식하지 못하지만 IE6에서 PNG 투명 배경을 지원할 수 있는 JS 프로그램이 있습니다.

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

function CorrectPNG() 
{ 
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;" 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); 


하지만 구현해야 할 곳이 한 곳뿐이라면 CSS를 사용하는 것이 더 효율적입니다. IE5.5의 AlphaImageLoader 필터는 여기에 적용됩니다: 

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

필터:

progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='temp.png',sizingMethod='scale') 


AlphaImageLoader 필터에 유의해야 합니다. 이 영역 링크와 버튼이 유효하지 않게 됩니다. 해결 방법은 링크나 버튼에 상대적인 위치를 추가하는 것입니다. 또한 AlphaImageLoader는 배경 반복을 설정할 수 없으므로 이미지 자르기의 정확성에 대한 요구 사항이 더 높습니다. 

2. IE7, Opera 및 Firefox에서 PNG 배경 사용
이 브라우저는 PNG 배경을 잘 지원하며 직접 적용할 수 있습니다. 실제 응용에서는 IE6 브라우저도 동시에 관리해야 하므로 호환성 처리를 위해 스타일시트에 *html을 추가해야 합니다. 즉, 동일한 레이블에 두 가지 배경을 제공하는 것입니다. 예:

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

.uicss_cn{ 배경:투명 URL(../images/temp.png) 반복-x 왼쪽 하단;높이:3px;위치:절대;폭:100%; 글꼴 크기:0px;}

*html .uicss_cn{배경: 투명; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/temp.png", sizingMethod="crop");} 

세, 추가 포인트
3월 27일, 제가 삽입한 PNG 배경 호환 코드가 유효하지 않다는 사실을 우연히 발견했습니다. 최종적으로 이미지 파일에 문제가 있는 것으로 확인되었습니다. 불꽃놀이를 사용하여 생성된 일부 PNG 이미지는 PSD 형식으로 내보낸 다음 PS에서 PNG 파일로 저장해야 합니다.