JS makes the PNG background image transparent

PNG images have good quality, and the shadow effect does not have complex edges. They are 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 extremely convenient to insert images with irregular borders on a color transition Background with complex backgrounds!

However, currently, the PNG image with a transparent background inserted in IE cannot be displayed normally. ie will automatically add a gray background to the image in the. PNG format. To solve this problem, add Javascript. There are two methods:

First, put the following code in the head area to solve the problem.

<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 ") { 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>

Type 2: add this code to an image separately:

<Span Style = "filter: progid: dximagetransform.microsoft.alphaimageloader(src}'your image name .png ', sizingmethod = 'Scale');"> </span>

 

 

 

At present, most browsers do not fully support PNG. Although Ie can display PNG images, if PNG images contain transparent parts, the display of transparent parts is not normal.

There are roughly the following methods to solve this problem (the Principles are solved by the alphaimageloader filter ).

Method 1:

<Div style = "filter: progid: DXImageTransform. Microsoft. alphaimageloader (src =/images/header.png); width: 200px; Height: 50px"> </div>

Comment: although this method can better solve the problem of IE 5 + browsers, Firefox, which can normally display transparent PNG images, cannot be displayed normally!

Method 2:

<SCRIPT type = "text/JavaScript">
// PNG correction Control 1.0 for IE 5.5 or higher.
// Author: SHUN ZI

Function isie (){
If (navigator. appname! = "Microsoft Internet Explorer") {return false}
Return true
}

Function correctpng ()
{
For (VAR I = 0; I <document. Images. length; I ++)
{
VaR IMG = Document. Images
VaR LW = IMG. Width
VaR LH = IMG. Height
VaR imgname = IMG. SRC. touppercase ()
If (imgname. substring (imgname. Length-3, imgname. Length) = "PNG ")
{
IMG. style. Filter + = "progid: DXImageTransform. Microsoft. alphaimageloader (src =" + IMG. SRC + ", sizingmethod = scale );"
IMG. src = "/images/transparent.gif" // transparent GIF image with transparent.gif 1px * 1px
IMG. width = LW
IMG. Height = lh
}
}
}
If (isie () {window. attachevent ("onLoad", correctpng );}
</SCRIPT>

Comments: This method can solve this problem, but if it is not for local debugging, it usually takes some time to switch!

Method 3:

<Div id = "Header"> <! -- This div is the region where the PNG Image needs to be inserted -->
<SCRIPT type = "text/JavaScript">
If (navigator. appname! = "Microsoft Internet Explorer "){
Document. write (" ");
} Else {
Document. write (" ");
}
</SCRIPT>
<Div>
Comments: in fact, there are not many places where transparent PNG images are absolutely needed on the webpage. Therefore, if you only use one or two transparent PNG images on the webpage, we suggest using this method.

If the browser disables JS, Methods 2 and 3 certainly do not work. For method 3, we can make some improvements:

<Div id = "Header">
<Div id = "index_header"> Brief description of the image. Do not disable Js for normal browsing. </div>
<Div>

<SCRIPT type = "text/JavaScript">
If (navigator. appname! = "Microsoft Internet Explorer "){
Document. getelementbyid ('logo '). innerhtml = "} Else {
Document. getelementbyid ('logo '). innerhtml = "}
</SCRIPT>