Css/js implements transparent background implementation code for png image ie6

In IE6 direct display (including content inserted directly as the background image) PNG-24 format of the image, is not correctly displayed transparent, translucent content and other content of the superposition of the rendering effect. The beautiful blur, fade-out, and projection effects in IE7 + and other standard browsers may become ugly gray in IE6.

If you cannot stand the ugly gray in ie6, and you cannot give up the effect of translucent superposition, you will have a chance to encounter this problem. There are many solutions. Here are some examples for your reference:

1. Modify the design effect so that the entire transparent area is sliced without affecting the display effect. Or remove the translucent effect.

2. htc file
Htc here has nothing to do with htc mobile phones. Currently, it is only supported by IE5.5 +.
Click here to download the demo file.
This scheme applies to both the direct insertion of images in the content and the background image. You can find more Related introductions on the Internet, but not the methods recommended in this article.

3. Flash Replacement
That is to say, use flash to show the places where translucent effects are needed ...... Is it a headache to listen?
This parameter is only applicable when an image is inserted directly. Similarly, I will not elaborate on the solutions not recommended in this article.

4. IE filter
This method is applicable to background images. You can also use the background image to insert an image directly.
Specific practices:
For example, if there is a container named .png Box, use style definition in a browser that supports PNG-24:

The code is as follows:	Copy code
. PngBox { . Background: url ("translucent.png") no-repeat 0 0; .}

In IE5.5/IE6, you do not need this background image. Instead, you can use a filter to load the image. That is:

The code is as follows:	Copy code
. PngBox { . Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'translucent.png ', sizingMethod = 'scale '); }

It is worth noting that, when using a filter, the image's src should be the path relative to the webpage file, not the path relative to the css file; or use an absolute path.
In summary, the definitions of compatibility can be:
 

The code is as follows:	Copy code
. PngBox { . Background: url ("translucent.png") no-repeat 0 0; . _ Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'translucent.png ', sizingMethod = 'scale '); . _ Background: none; }

For more information about how to use AlphaImageLoader, search online.

5. JS replacement method
This JS replacement method is based on the IE Filter method in 4th points. It is suitable for adding transparent png images to a page in batches.

There are many css definitions used to insert an image, and you need to think about the image path. If there are multiple images, the code that defines the background will be a large part. This JS can only focus on where to use png images, and other css code will be automatically constructed.

JS implements transparent background code collection under PNG image IE6. You can use it directly. I will not talk much about it !!

The code is as follows:

Copy code

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         }       }    } Function alphaBackgrounds (){ Var rslt = navigator. appVersion. match (/MSIE (d +. d + )/,''); Var itsAllGood = (rslt! = Null & Number (rslt [1]) >=5.5 ); For (I = 0; I <document. all. length; I ++ ){ Var bg = document. all [I]. currentStyle. backgroundImage; If (bg ){ If (bg. match (/. png/I )! = Null ){ Var mypng = bg. substring (5, bg. length-2 ); // Alert (mypng ); Document. all [I]. style. filter = "progid: DXImageTransform. Microsoft. AlphaImageLoader (src = '" + mypng + "', sizingMethod = 'crop ')"; Document. all [I]. style. backgroundImage = "url ('')"; // Alert (document. all [I]. style. filter );          }                                                    }    } } If (navigator. platform = "Win32" & navigator. appName = "Microsoft Internet Explorer" & window. attachEvent ){ Window. attachEvent ("onload", correctPNG ); Window. attachEvent ("onload", alphaBackgrounds ); }

Now, you only need to call this js to implement a transparent page, and then add a png image to the page to implement background transparency.