Applications with PNG backgrounds in different browsers

1. Use PNG background in IE6
IE6 itself does not know the transparency feature of PNG images. Although IE6 supports JS with PNG transparent backgrounds Program : CopyCode 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 <document. Images. length; 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 = "<span" + imgid + imgclass + imgtitle
+ "Style = \" "+" width: "+ IMG. Width +" PX; Height: "+ IMG. height +" PX; "+ imgstyle + ";"
+ "Filter: progid: DXImageTransform. Microsoft. alphaimageloader"
+ "(Src = \ '" + IMG. SRC + "\', sizingmethod = 'Scale'); \"> </span>"
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:Copy codeThe 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:Copy codeThe 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.