The application of PNG background in different browsers _javascript skills

First, use PNG background in IE6
IE6 itself does not know the transparency features of PNG images, although there are JS programs that allow IE6 to support PNG transparent backgrounds:

Copy Code code 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.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 = "<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);

But if you need to implement only one place, or use CSS to achieve a higher efficiency. The ie5.5+ alphaimageloader filter is applied here:

Copy Code code as follows:

Filter
Progid:DXImageTransform.Microsoft.AlphaImageLoader
(src= ' temp.png ', sizingmethod= ' scale ')

Note that the AlphaImageLoader filter will cause links and buttons in this area to be invalid, by adding the link or button: position:relative, and making it relatively floating. In addition AlphaImageLoader can not set the background of the repetition, so the picture of the Chettu precision will have a higher demand.
second, use PNG background in IE7, opera and Firefox
These browsers support the PNG background very well and can be applied directly. In practice, we need to take care of the IE6 browser at the same time, so we need to add *html to the style sheet to do the compatible processing. Which is to give the same label two times background.
For example:

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

third, add a little
March 27, inadvertently found that their own inserted PNG background compatible code is not valid. Finally, the problem is confirmed in the picture file. Use fireworks to generate part of the PNG picture, you need to export to PSD format, and then from PS to save as a PNG file, you can.