Seven ways to make the PNG background transparent under IE6

Http://apps.hi.baidu.com/share/detail/16871084

PNG Image Format introduction:

PNG is an image file storage format developed in the middle of 1990s. It aims to replace the GIF and TIFF file formats and add features not available in some GIF file formats. The portable network graphic format (PNG) name is derived from the unofficial "PNG's not GIF". It is a bitmap file storage format, read as "ping ". When PNG is used to store a grayscale image, the depth of the grayscale image can be up to 16 bits. When the color image is stored, the depth of the color image can be up to 48 bits, it can also store up to 16-bit alpha channel data.

Transparent Display of PNG background in IE6

The PNG format is more colorful than the GIF format, especially the gradient and the transparent background gradient are much better than the GIF format. Currently, the latest browsers basically support the PNG format. However, IE6 does not support PNG background transparency. A gray box is displayed.

Solution to PNG background transparency in IE6

. Pngimg {Background: url(image.png); _ Background: url(image.gif );}
Note that the preceding _ No. Currently, IE7, 8, and Firefox browsers do not support this CSS syntax, and only IE6 recognizes it. Therefore, other browsers call PNG, while IE6 just calls GIF.

2. filter filters clear background gray in IE6

Background: url(a.png) Repeat-x 0; _ Background: none; _ filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = "a.png", sizingmethod = "crop ");
The above principle is that if you call PNG or IE6, the background is not set first, and then the filter is called to display the PNG image.

Defect: the background cannot be tiled in IE6, which is a serious problem. At the same time, there is also a small problem in performance. This method is feasible when there are not many times on the page.

The alphaimageloader filter will invalidate links and buttons in the region. The solution is to add position: relative for links or buttons.CodeTo make it relatively floating. Alphaimageloader cannot set repeated backgrounds. Therefore, it has a high precision requirement on image cropping.

The last method to solve the problem that the link in IE is invalid is as follows:

3. Use js to solve the problem of IMG in HTML (PNG Image inserted in Webpage). PNG background gray

Insert a JS file into the page. The principle is the same as above. the IMG label is replaced with the <span> label and the background of the <span> label is set through the filter. It will process all inserted PNG files in this way.
<! -- [If IE 6]>
<SCRIPT>
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>
<! [Endif] -->

Iv. Call iepngfix. HTC to solve ie6png background gray and stretch Problems

This method comes from: http://www.twinhelix.com/css/iepngfix/ this method is based on winodws platform, does not support HTC in Linux, has not been verified, but some netizens published confirmation.

Add the following snippet to the CSS file

<Div class = "pngimg"> PNG background image </div>
The detailed application method is not described here.

This method should be excellent when PNG is forced and cannot be used. Although it cannot solve IE6 tile perfectly, it at least achieves stretching, in many cases, tile can be used instead. Of course, the efficiency problem still exists.

5. Transparent "block" method

. Div {filter: alpha (opacity = 20); moz-opacity: 0.2; opacity: 0.2 ;}
IE6, IE7, IE8, ff2, and ff3 passed the test. Tip: For IE6 and IE7, you must set a width (100%). Otherwise, the effect will not be displayed.

6. dd_belatedpng, which is an excellent solution that IE6 does not support PNG

The entire Internet solution to this IE6 transparent PNG solution is also numerous, from using the unique ie filter or e xpression, and then to JavaScript + transparent GIF. however, these methods do not support backgrond-position and background-repeat in CSS.

The only reason I want to introduce dd_belatedpng today is that it supports backgrond-position and background-repeat. this is not available for other JS plug-ins. dd_belatedpng also supports the: hover attribute and .

See Demo: http://www.ediyang.com/demo/DD_Png/

Principle
This JS plug-in uses Microsoft's VML language for rendering, while most other JS plug-ins that solve PNG problems use the alphaimageloader filter.

Usage
1. Download The dd_belatedpng.js file here.
Http://dillerdesign.com/experiment/DD_belatedPNG/#download

2. Reference in the webpage as follows:
<! -- [If IE 6]>
<SCRIPT src = "dd_belatedpng.js" mce_src = "dd_belatedpng.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">/* example */dd_belatedpng.fix('.png _ BG ');/* set. change png_bg to apply the CSS selector of transparent PNG, for example '. trans '*/</SCRIPT> <! [Endif] -->
3. There are two types of calling functions. One is dd_belatedpng.fix (), as shown in the code above. The other is fix (). In this method, the CSS selector name must be specified in the function.
Use a: hover
5-25 update: If you want to use transparent PNG as the background image for a: hover like jutoy, you need to pay attention to your code and use ": as a selector. otherwise, the operation may fail. I also updated the demo. Please check the updates. next let's look at the correct code:
<! -- [If IE 6]>
<SCRIPT type = "text/JavaScript" src = "JS/dd_belatedpng.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript"> dd_belatedpng.fix ('. Trans,. Box A: hover'); </SCRIPT>
<! [Endif] -->
7. Use JavaScript and CSS filters to solve the problem of transparent background of the entire site PNG for IE
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
Function enablepngimages ()
{Var imgarr = Document. getelementsbytagname ("IMG ");
For (I = 0; I If (imgarr [I]. SRC. tolowercase (). lastindexof (". PNG ")! =-1)
{
Imgarr [I]. style. filter = "progid: DXImageTransform. microsoft. alphaimageloader (src = '"+ imgarr [I]. SRC + "', sizingmethod = 'auto ')";
Imgarr [I]. src = "spacer.gif ";
}
If (imgarr [I]. currentstyle. backgroundimage. lastindexof (". PNG ")! =-1)
{
VaR IMG = imgarr [I]. currentstyle. backgroundimage. substring (5, imgarr [I]. currentstyle. backgroundimage. Length-2 );
Imgarr [I]. style. Filter = "progid: DXImageTransform. Microsoft. alphaimageloader (src = '" + IMG + "', sizingmethod = 'crop ')";
Imgarr [I]. style. backgroundimage = "url(spacer.gif )";
}
}
}
Function enablebgpngimages (bgelements)
{
For (I = 0; I <bgelements. length; I ++)
{
If (bgelements [I]. currentstyle. backgroundimage. lastindexof (". PNG ")! =-1)
{// Alert (bgelements [I]);
VaR IMG = bgelements [I]. currentstyle. backgroundimage. substring (5, bgelements [I]. currentstyle. backgroundimage. Length-2 );
Bgelements [I]. style. Filter = "progid: DXImageTransform. Microsoft. alphaimageloader (src = '" + IMG + "', sizingmethod = 'crop ')";
Bgelements [I]. style. backgroundimage = "url(spacer.gif )";
}
}
}
</SCRIPT>

<! -- [If lt IE 7]>
<SCRIPT type = 'text/JavaScript '>
VaR bgelements; enablepngimages (); If (bgelements) {enablebgpngimages (bgelements );}
</SCRIPT>
<! [Endif] -->

. Pngimg {behavior: URL (iepngfix. HTC );}
Add the following part to HTML file 1. IE6 using GIF, others using PNG to solve the PNG background gray