Seven ways to make the PNG background transparent under IE6 you choose

Original address: http://blog.csdn.net/mosliang/article/details/6760028

Believe how to solve the problem of PNG in IE6 under the transparency of a lot of people. In order to pursue a better page effect, many people like to use the PNG format of the picture, precisely because the IE6 under the PNG image transparency problem, many people have to retreat and then use the GIF format to replace the image. Today to introduce a IE6 under PNG transparent solution, support background (including position, Repeat, img SRC).

1, Dd_belatedpng Introduction:

Dd_belatedpng is a free JS library, its role is to let the PNG format picture under IE6 Transparent, support the SRC element in , in the background application to support the Background-image properties of CSS, Of course, the most important thing is to support Background-position and background-repeat, which is good news for people who like CSS spirit.

2, the realization principle:

The advantage of using Microsoft VML instead of the AlphaImageLoader filter is to support position and repeat, which perfectly supports the implementation of popular CSS Spirit (CSS sprite).

3. How to use:

Add the following code between

1234567891011

<!--[if IE 6]> <script src= "Dd_belatedpng.js" ></script> <script> &NBSP;&NBSP; /* EXAMPLE */ &NBSP;&NBSP; dd_belatedpng.fix ('. class, #id '); &NBSP;  &NBSP;&NBSP; /* string argument can be any CSS selector */ &NBSP;&NBSP; /*. PNG_BG example is unnecessary */ &NBSP;&NBSP; /* change it to what suits you! */ </script> <! [Endif]-->

Dd_belatedpng.fix ('. class, #id '); Here, change the. class and #id to your class and ID, and support multiple class and ID

4. js File Download:

DD_BELATEDPNG_0.0.8A uncompressed version: Click to download
DD_BELATEDPNG_0.0.8A compressed version: Click to download

PNG image Format Description:

PNG is an image file storage format that was developed in the mid 1990s to attempt to replace GIF and TIFF file formats while adding features not available in the GIF file format. The streaming web graphics format (Portable Network Graphic format,png) is named after the unofficial "PNG's not GIF", which is a bitmap (bitmap file) storage format that reads "Ping". When PNG is used to store grayscale images, the depth of the grayscale image can be as much as 16 bits, and when the color image is stored, the depth of the color image can be as many as 48 bits, and the alpha channel data of up to 16 bits can also be stored.

IE6 display problem with PNG background transparent

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

IE6 PNG Background Transparent solution

. pngimg {Background:url (image.png); _background:url (image.gif);}
Note that the above _ number, currently ie7,8 and Firefox browser and so on do not support this CSS syntax, only IE6 recognition. As a result, other browsers call PNG, and IE6 just called GIF.

Two. Filter filter to resolve background gray under IE6

Background:url (a.png) repeat-x 0 0; _background:none; _filter:progid:dximagetransform.microsoft.alphaimageloader (src= "A.png", sizingmethod= "crop");
The principle above is that the other calls Png,ie6, then the background is not set, then the filter is called to display the PNG picture.

BUG: IE6 background cannot be tiled, this problem is very serious. Also in the performance of small problems, the page is not a lot of times when the method is still feasible.

The AlphaImageLoader filter causes links and buttons in the area to be invalid, and the workaround is to add: position:relative for links or buttons, so that the code is relatively floating. AlphaImageLoader cannot set the repetition of the background, so the transduction accuracy of the picture will be very high accuracy requirements.

The most useful way to resolve invalid links under IE is to use the following:

Three. Use JS to solve the PNG background gray Problem of IMG in HTML (PNG image inserted in Web page)

Insert a section of JS in the page. The same principle, just replace the IMG tag with the <span> tag, and set the background of the <span> tag through the filter. It handles all of the inserted PNG as such.

<!--[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.csstext;if (im G.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]-->?

Four. Call IEPNGFIX.HTC to resolve ie6png background gray and stretch issues

This method comes from: http://www.twinhelix.com/css/iepngfix/This method is based on the WINODWS platform, does not support HTC under Linux, not verified, but a netizen issued a confirmation.

The following fragment is added to the CSS file

<div class= "pngimg" >png background image </div>
Detailed application methods are not introduced here.

In the case of forced and involuntarily must use PNG, this method should be relatively good, although not perfect to solve the IE6 tile, but at least the implementation of the stretch, so that in many cases can be used instead of tiling. Of course, the problem of efficiency is still there.

Five. Let the "block" Transparent method

. div {Filter:alpha (opacity=20); moz-opacity:0.2; opacity:0.2;}
Test IE6,IE7,IE8,FF2,FF3 are passed. Tip: Ie6,ie7 need to set a width (100% also line), otherwise you will not see the effect.

Six. Dd_belatedpng, resolve IE6 does not support PNG excellent solution

The entire Internet solution to this IE6 transparent PNG scheme is also numerous, from the use of IE-specific filters or e xpression, and then to javascript+ transparent GIF replacement. But these methods have one drawback, is not supported in CSS Backgrond-position and background-repeat.

And I introduce dd_belatedpng today, just need one reason, is that it supports backgrond-position and background-repeat. This is not available with other JS plugins. Dd_belatedpng also supports a:hover properties , as well as .

See demo:http://www.ediyang.com/demo/dd_png/

Principle
This JS plugin uses Microsoft's VML language for drawing, while most other JS plugins that solve PNG problems use the AlphaImageLoader filter.

How to use
1. Download the Dd_belatedpng.js file here.
http://dillerdesign.com/experiment/DD_belatedPNG/#download

2. Refer to the Web page 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 ');  /* Change the. PNG_BG to a CSS selector that you applied transparent PNG to, such as the '. Trans ' */   </script in my example > <! [endif]-->  
3. There are 2 kinds of call functions, one is dd_belatedpng.fix (), such as the above code. The other is fix (), which requires the CSS selector name to be indicated within the function.
Use a:hover Please note
5-25 update: If you want to use transparent PNG as a background image of A:hover as a jutoy, then you need to be aware of your code and need to "a:hover" as a selector. Failure to do so may result in failure. At the same time I also updated the demo, please check the required updates. Then we 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]-->  
Seven. Resolve the PNG background transparency problem in IE whole station via JavaScript and CSS filters

<script type= "Text/javascript" language= "JavaScript" > Function enablepngimages () {var Imgarr = Document.g        Etelementsbytagname ("IMG");              for (i=0; i  <!--[if Lt IE 7]> <script type= ' Text/javascript ' > var bgelements; Enablepngimages ();        if (bgelements) {enablebgpngimages (bgelements);} </script> <!  [endif]-->. pngimg {behavior:url (IEPNGFIX.HTC);}

The following fragment is added to HTML file one. IE6 uses GIF, others use PNG to resolve PNG background gray

Seven ways to make the PNG background transparent under IE6 you choose