Use Js or CSS filters to achieve the translucent effect of PNG images in IE6 IE6PNG properly_html/css_WEB-ITnose

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图片会出现灰色

插件三：EvPng

该插件使用方法包括优缺点都跟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]-->

 

优点：支持img、css背景

缺点：需要jQuery库支持，不支持CSS Sprite、平铺、伪类，加载初期会出现灰色

有了这种方法htc的解决方案，显得多于了，不过这里介绍的htc解决IE6 PNG透明问题只是htc功能的冰山一角，htc在其他方面的应用远远比这强大的多

参考：

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