Ie Open PNG Image

PNG images have good quality. The shadow effect does not have complex edges and is smooth. If you insert a webpage, you can add a lot of colors to the website content! More importantly, the quality of images on the page is improved without increasing the image size. It is very convenient to insert images with irregular borders on over-colored backgrounds with complex backgrounds!

However, at present, the .png image inserted in the transparent background cannot be displayed normally in IE. IE will automatically add a gray background to the image in ". PNG" format.

To solve this problem, add JavaScript. The specific method is as follows:

Put the following code in the head area to solve the problem.

I tested that ie7.0 can be displayed normally, but IE6 and IE6 cannot.

 

The following is a reference clip:
<Script language = "JavaScript">
Function correctpng ()
{
For (VAR I = 0; I <document. Images. length; I ++)
{
VaR IMG = Document. Images [I]
VaR imgname = IMG. SRC. touppercase ()
If (imgname. substring (imgname. Length-3, imgname. Length) = "PNG ")

// This is not very good, because the image format is not determined by the extension. Here, the server method can be used to obtain the true format of the image and pass it for inspection.
{
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
I = I-1
}
}
}
Window. attachevent ("onLoad", correctpng );
</SCRIPT>

You can also add this code to an image separately:

<! -- <Span
Style = "filter: progid: dximagetransform.microsoft.alphaimageloader(src+'testpng.png ', sizingmethod = 'Scale');"> </span> -->