Use JS or CSS filter to achieve IE6 PNG image translucent effect ie6png duly

Next, we introduce several PNG images in the IE6 opaque solution

1, with their own PNG, let IE6 side to go

The first time you make a PNG image, save it as a GIF, because IE6 is a GIF image that supports transparency and then defines it in CSS

. Pngtest { background:url (mark.png); _background:url (mark.gif);}

Advantages: Convenient, fast, ultra-simple to use

Disadvantage: The PNG image is only some local area transparent, this method is more effective, but if the picture is translucent, this method can not be achieved

Another workaround for this approach: use PS or other image editing tools to save PNG images in 8-bit format so that IE6 is transparent.

2. CSS filter to achieve translucent PNG images

. Pngwrap{padding:80px;background:Green;}. Pngtest{width:165px;Height:50px;Overflow:Hidden;text-indent:-9999em;background:URL (http://www.qmtx3.com/data/mark/mark.png) no-repeat;_background:None;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' http://www.qmtx3.com/data/mark/mark.png ' sizingmethod= ' scale ' enabled=true);}

Test IE6 using CSS filters to resolve PNG picture transparency issues

Code Description: _ Prefix CSS property only IE6 can recognize, as to why to add _background:none, because the previous definition of the background picture layer depth (can be understood as the z-index of the property), than the filter is higher, will be the filter definition of the picture block, so here to let IE6 background for the None,ps:filter picture path can be a remote picture path, or a relative path, if you use relative path, it should be relative to the path of the page rather than CSS

Advantages: Do not need JS patch, image maintenance cost is low, because a PNG image

Disadvantage: The picture defined by filter does not support background-position:;(positioning) Background-repeat:;(Tile) property, so CSS Sprite technology cannot be used, and the method cannot be applied to the IMG tag. When applied to a label on a link, it can sometimes cause the link to not click, you need to define the a tag position:relative

3, HTC plugin PNG image IE6 any of my lines

<q> starting with version 5.5, Internet Explorer (IE) began to support the concept of web behavior. These behaviors are described by a script file with the suffix named. HTC, which defines a set of methods and properties that programmers can apply to almost any element on an HTML page. </q> detailed HTC File description please steady

Download IE6 browser PNG image transparent HTC Plugin

Copy IEPNGFIX.HTC and Blank.gif files to your site directory (copy blank.gif, IEPNGFIX.HTC, Iepngfix_tilebg.js (the file is necessary to support position and repeat attributes) To place in a position;)

The definition will be defined using a PNG image on the label, as in the following CSS style

Img,div {behavior:url (iepngfix.htc);}

Modify IEPNGFIX.HTC in iepngfix.blankimg = ' images/blank.gif '; path to your picture path

Let IE6 browser load JS file

<!--[if IE 6]><script type= "Text/javascript" src= ". /js/iepngfix_tilebg.js "></script><! [endif]-->

Advantages: The configuration of this, the whole site to use is very convenient, a configuration, lifelong benefits

Disadvantage: The configuration of relative methods, the site will be more than three files, do not support pseudo-class elements such as hover, can not use CSS Sprite technology, the initial page loading will still see the PNG image transparent area is gray

4, CSS version JS solution

The method also needs a transparent blank.gif picture, the third method in the compression package, which is not provided separately, defines the CSS style

Img{_azimuth:expression ( This. pngset? This. pngset=true:( This. NodeName = = "IMG" && This. Src.tolowercase (). IndexOf ('. png ') >-1? ( This. Runtimestyle.backgroundimage = "None", This. Runtimestyle.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (src= '" + This. src + "', sizingmethod= ' image ')", This. src = "blank.gif"):( This. ORIGBG = This. origbg? This. ORIGBG: This. currentStyle.backgroundImage.toString (). replace (' url (' ', ') '. Replace (') ', '), This. Runtimestyle.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (src= '" + This. ORIGBG + "', sizingmethod= ' crop ')", This. Runtimestyle.backgroundimage = "None"), This. pngset=true);}

Code Description: this.src = "Blank.gif" path is also relative to the paging file, not the CSS file

Advantages: The method is relatively simple

Disadvantage: Need to add a transparent picture blank.gif, only support the IMG tag that does not support the element settings of the PNG background picture, does not support element hover and other pseudo-classes, just loaded will also appear gray

5. Original Eco-JavaScript solution

JavaScript resolution IE6 PNG image opaque plug-in more, see a person likes to choose to use the

plugin one : iepngfix

Download IE6 browser png picture transparent Iepngfix Plugin

Let IE6 browser load JS file

<!--[if IE 6]><script type= "Text/javascript" src= "Js/iepngfix.js" ></script><! [endif]-->

plugin two : dd_belatedpng

The plug-in should be a real plug-in, the use of the method is very plug-in

Download IE6 browser png picture transparent Dd_belatedpng Plugin

Blog Backup: dd_belatedpng.js

<!--[if IE 6]><script type= "Text/javascript" src= "Js/dd_belatedpng.js" ></script><! [endif]-->

How to use:

Dd_belatedpng.fix (". Pngtest, #pngtest,. Pngtest img,.pngtest:hover");

<!--[if IE 6]>    <script type= "Text/javascript" src= "Js/dd_belatedpng.js" ></script>    <script language= "javascript" type= "Text/javascript" >    function() {        dd_ Belatedpng.fix ("*");    }     </script><! [endif]-->

The fix () parameter is passed to a transparent element or a child element, and the method and jquery select $ use basically the same, except that multiple elements are separated by "," and JQ uses a space, in order to be more convenient can be added at the end of the file

The workaround for W3cfuns is to add an ID or class to each label that uses PNG, and then write

function () {   dd_belatedpng.fix (". Pngfix,.pngfix:hover");}

This in the page in the need to transparent elements on the class= "PngFix xx BBB", class as long as the inclusion of PngFix can be

Advantages: Support img tag, CSS Sprite, background, tile, pseudo class, do not need to configure what, introduced JS can be used, like a

Cons: PNG images appear gray at the beginning of loading

plug-in three : Evpng

The plug-in uses the same method, including the pros and cons are the same dd_belatedpng, no longer detailed

Download IE6 browser png picture transparent Evpng Plugin

<!--[if IE 6]>    <script type= "Text/javascript" src= "Js/evpng.js" ></script>    < Script language= "javascript" type= "Text/javascript" >    function() {        Evpng.fix ( "*");    }     </script><! [endif]-->

plug-in four : Jquerypngfix plugin

Download IE6 browser png picture transparent Jquerypngfix Plugin

Blog Backup: Jquerypngfix

Modify Pngfix.js file in Blankgif: ' images/blank.gif ' transparent GIF picture path to relative page path

Let IE6 browser load JS file

<!--[if IE 6]><script type= "Text/javascript" src= "Js/pngfix.js" ></script><! [endif]-->

Pros: Support for IMG, CSS Backgrounds

Cons: requires jquery library support , does not support CSS Sprite, tile, pseudo class, the initial load will appear gray

With this approach, HTC's solution appears to be more than that, but the HTC resolution IE6 PNG Transparency issue described here is just the tip of the iceberg for HTC, and HTC is far more powerful than this in other ways.

Reference:

http://www.w3cfuns.com/forum.php?mod=viewthread&tid=297

Http://www.cnblogs.com/rock506/archive/2010/11/30/1892067.html

Http://www.xuanfengge.com/ie6-png-transparency-solution.html

Use JS or CSS filter to achieve IE6 PNG image translucent effect ie6png duly