Application of PNG background in different browsers_javascript skills-JS Tutorial-php.cn

Application of PNG background in different browsers_javascript skills

WBOY

Release： 2016-05-16 18:51:16

Original

1064 people have browsed it

1. Use PNG background in IE6
IE6 itself does not recognize the transparency feature of PNG images, although there is a JS program that allows IE6 to support PNG transparent background:

Copy Code The code is as follows:

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;" imgStyle 
if (img.align = = "right") imgStyle = "float:right;" imgStyle 
if (img.parentElement.href) imgStyle = "cursor:hand;" imgStyle 
var strNewHTML = " "  "width:" img.width "px; height:" img.height "px;" imgStyle ";" 
 "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
 "(src ='" img.src "', sizingMethod='scale');">" 
img.outerHTML = strNewHTML 
j = j-1 
} 
} 
} 
} 
window.attachEvent("onload", correctPNG); 

But if there is only one place that needs to be implemented, it is more efficient to use CSS. The AlphaImageLoader filter of IE5.5 is applied here:

Copy the code The code is as follows:

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

It should be noted that the AlphaImageLoader filter will cause this Area links and buttons are invalid. The solution is to add: position: relative; to the link or button to make it float relatively. In addition, AlphaImageLoader cannot set the repetition of the background, so it has higher requirements for the accuracy of image cutting.
2. Use PNG backgrounds in IE7, Opera and Firefox
These browsers have good support for PNG backgrounds and can be applied directly. In practical applications, we need to take care of the IE6 browser at the same time, so we need to add *html to the style sheet for compatibility processing. That is, giving the same label two backgrounds.
For example:

Copy code The code is as follows:

.uicss_cn{background:transparent url (../images/temp.png) repeat-x bottom left;height:3px;position:absolute;width:100%; font-size:0px;} 
*html .uicss_cn{background:transparent; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/temp.png", sizingMethod="crop");} 

Three, additional points
On March 27, I accidentally discovered that the PNG background compatibility code I inserted was invalid. Finally it was confirmed that the problem was with the image file. Some png images generated using fireworks need to be exported to PSD format and then saved as PNG files from PS.