The following will introduce several solutions to PNG images being opaque in IE6

1. Use your own PNG and let IE6 go by itself

When making a PNG image first, save it as a GIF image, because IE6 supports transparency of GIF images, and then define it in css

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

Advantages: Convenient, fast, easy to use Super simple

Disadvantages: This method is more effective for PNG images that are only partially transparent, but if the image is semi-transparent, this method cannot be achieved

Another extension of this method A solution: Use PS or other image editing tools to save the png image in 8-bit format, so that IE6 supports transparency

2. Use CSS filter to make the PNG image translucent

.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);}

Testing IE6 to use CSS filters to solve the transparency problem of PNG images

Code description: _The prefixed css attribute can only be recognized by IE6, as for why it needs to be added_ background:none;, the reason is that the layer depth of the background image defined earlier (can be understood as the z-index of the attribute) is higher than that of the filter, which will block the image defined by the filter, so the background of IE6 should be set to none here. , PS: The image path in the filter can be a remote image path or a relative path. If a relative path is used, it should be a path relative to the page rather than CSS

Advantages: No JS patch is required, pictures The maintenance cost is low, because it is just a png image

Disadvantages: the image defined by the filter does not support the background-position:; (positioning) background-repeat:; (tile) attribute, so CSS Sprite technology cannot be used. And this method cannot be applied to the img tag. When applied to the link a tag, sometimes the link cannot be clicked. In this case, the a tag needs to be defined position:relative

3. HTC plug-in PNG image IE6 Let me go

Starting from version 5.5, Internet Explorer (IE) begins to support the concept of Web behavior. These behaviors are described by script files with the suffix .htc, which define a set of methods and attributes that programmers can apply to almost any element on the HTML page. For detailed htc file introduction, please steadily

Download the IE6 browser PNG image transparent HTC plug-in

Copy the iepngfix.htc and blank.gif files to your website directory (copy blank. gif, iepngfix.htc, iepngfix_tilebg.js (this file is essential to support position and repeat attributes) to a certain location;)

definition will be defined using the tag of the PNG image, as shown in the following css Style

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

Modify IEPNGFix.blankImg = 'images/blank.gif' in iepngfix.htc; the path is your image path

Let the IE6 browser load the JS file

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

Advantages: After configuring this, it will be very convenient to use the entire site. Once configured, it will be used for life.

Disadvantages: When configuring the relative method, the website will have three more files, it does not support pseudo-classes such as element hover, and CSS Sprite technology cannot be used. When the page is loaded, you will still see that the transparent area of ??the png image is gray

4. CSS version JS solution

This method also requires a transparent blank.gif image, which is included in the third method compressed package. It is not provided separately here. Define 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" The path is also relative to the page file, not the CSS file

Advantages: Method Relatively simple

Disadvantages: Need to add a transparent image blank.gif, only supports the img tag and does not support PNG background images set by elements. It does not support element hover and other pseudo-classes. It will also appear gray when it is first loaded

5. Original javascript solution

There are many plug-ins for javascript to solve the opacity of IE6 PNG images. I chose to use it based on my personal preference

Plug-in 1 : iepngfix

Download IE6 browser PNG image transparent iepngfix plug-in

Let IE6 browser load JS files

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

Plug-in 2: DD_belatedPNG

This plug-in should be regarded as a real plug-in, and its usage is very plug-in-like

Download the IE6 browser PNG picture transparent DD_belatedPNG plug-in

Backup of this blog: DD_belatedPNG.js

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

Usage:

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">    window.onload = function(){        DD_belatedPNG.fix("*");    }    </script><![endif]-->

The fix() parameter is passed to transparent elements or sub-elements. This method is basically the same as jQuery select $, except that it is separated between multiple elements. It is "," and jQ uses spaces. For more convenience, you can add

at the end of the file. The solution for w3cfuns is to add id or class to each tag that uses png, and then write it as

window.onload = function(){   DD_belatedPNG.fix(".pngFix,.pngFix:hover");}

In this way, add class="pngFix xx bbb" to the elements that need to be transparent on the page. As long as the class contains pngFix, it will be fine

Advantages: Supports img tag, CSS Sprite, background, tile, pseudo-class, no need to configure anything, you can use it by introducing JS, like it

缺點：加載初期PNG圖片會出現(xiàn)灰色

插件三：EvPng

該插件使用方法包括優(yōu)缺點都跟DD_belatedPNG相同，不再詳述

下載IE6瀏覽器PNG圖片透明EvPng插件

<!--[if IE 6]>    <script type="text/javascript" src="js/EvPng.js"></script>    <script language="javascript" type="text/javascript">    window.onload = function(){        EvPNG.fix("*");    }    </script><![endif]-->

插件四：jQueryPngFix插件

下載IE6瀏覽器PNG圖片透明jQueryPngFix插件

博客備份：JqueryPngFix

修改pngfix.js文件中blankgif: 'images/blank.gif'透明GIF圖片路徑為相對頁面路徑

讓IE6瀏覽器加載JS文件

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

?

優(yōu)點：支持img、css背景

缺點：需要jQuery庫支持，不支持CSS Sprite、平鋪、偽類，加載初期會出現(xiàn)灰色

有了這種方法htc的解決方案，顯得多于了，不過這里介紹的htc解決IE6 PNG透明問題只是htc功能的冰山一角，htc在其他方面的應(yīng)用遠(yuǎn)遠(yuǎn)比這強(qiáng)大的多

參考：

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