Application of PNG background in different browsers _ javascript skills

In the forum, kayeun asked me a question about the PNG transparent background in the FIREFOX browser. Here we will talk about how to apply the PNG image as the background in different browsers. 1. Use PNG background in IE6
IE6 itself does not know the transparency of PNG images, although there are JS programs that allow IE6 to support PNG transparent backgrounds:

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.css Text
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 = "+" style = \ "" + "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 );

However, if there is only one place to be implemented, CSS is still used for higher efficiency. Here the AlphaImageLoader filter of IE5.5 + is applied:

The Code is as follows:

Filter:
Progid: DXImageTransform. Microsoft. AlphaImageLoader
(Src1_'temp.png ', sizingMethod = 'Scale ')

Note that the AlphaImageLoader filter will invalidate links and buttons in the region. The solution is to add: position: relative for links or buttons to make them relatively floating. In addition, AlphaImageLoader cannot set duplicate backgrounds, so it has high requirements on image cropping accuracy.
Ii. Use PNG background in IE7, Opera, and firefox
These browsers support PNG backgrounds well and can be directly applied. In practical applications, we need to take care of IE6 browsers at the same time, so we need to add * html to the style sheet for compatibility processing. That is, the background is given to the same tag twice.
For example:

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 ");}

Iii. add one point
On July 6, March 27, we accidentally discovered that the PNG background compatibility code inserted by ourselves was invalid. Finally, the problem was confirmed on the image file. To use some png images generated by fireworks, export them to the PSD format and save them as PNG files from PS.