IE6下用css方法解决png图片透明和png背景透明的方法

现在解决IE6下png图片的透明问题。

 

首先，说明下,IE6不是不支持png透明，IE6可以支持8位的png透明图片，只是不支持24位的png透明。

如果一般是小图片的话，存储成8位的png图片就可以用。具体步骤如下：

图片切好后，记得一定要背景透明，然后“文件”、“存储为web所用格式”，然后在右边的下拉框中选择“png-8位”，然后一步步确定就可以了。

小图片也可以用gif图片，不过有些图片会产生锯齿。具体用哪个要看情况而定！

 

下面步入正题：

 

1.png图片的透明。

 

这种图片是以img的形式插入到网页中的。要解决这类图片的透明问题，只需要给这个图片一个class=“png”类，具体应用如下：

html代码：

<img src="" class="png" />

css代码如下：

img.png {background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "images/1.gif")}

注意这里的1.gif图片是一个新的引入的图片。放入到相应的文件夹里即可。文章的下面的压缩包就是1.gif的图片。

 

2.png背景图片的透明

 

这类图片的应用格式如下：

html代码：

要给.content这个div一个透明png的背景：

<div class="content"></div>

css样式如下：

background:url(images/touming.png);_background-image:url(yuanjianhang.iteye.com);background: none transparent scroll repeat 0% 0%; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/touming.png',sizingMethod='scale');

 

 上面这段代码中蓝色的代码是可以改变的，但是相关的属性千万不能删，比方说，你可以去掉yuanjianhang.iteye.com，但是绝对不能把_background-image：给去掉。

 

这里说明下，用png背景图片，不可以进行相关的定位，只能是默认的：background：url（） left top；

 

还有一个重要的问题，用了这段样式，很可能.content里面的超链接等内容不可以点击，解决这个问题，你可以在div.content里面在套一个div，比方这个div的样式名字为：div.con,然后给.con一个样式：

div.con {position:relative}就可以解决所有的问题了。

 

 

这个下面的压缩包是上面提到的1.gif图片：

 

评论

18 楼 nqykl 2010-12-20  

black.angel 写道

我在想这该死的IE6什么时候可以被终结

不是在今天就是在明天。
冬天快结束了离春天还会远吗？

17 楼 pbny001 2010-11-28  

因为网上透明PNG图标多了，所以直接拿来用，没想到用IETEST测试时发现IE6背景没透明，考虑到国内D版的XP装的都是IE6，大部分人还是用IE6，只好转GIF，还真不知道IE6还能支持8位透明的PNG，受教了。
目前IE6占市场的份额还是最高的，主要关键是克隆版的XP装的都是IE6，而普通用户是不大考虑升级IE导致的，除非全部转WIN7，否则IE6还是继续存在的。

16 楼 yuanjianhang 2010-11-25  

你是什么类型下用的？
是作为img标签用的还是在background-image下用的啊？

15 楼 983842825 2010-11-25  

那个加上去不行:
　　在IE6,下面还是没有做到透明..完全就是IE6下面,没有图片了..
这是个什么情况.??
　别的又可以看到.在IE6下面就是没有图片在的样子.去掉代码就变成but了..

14 楼 yuanjianhang 2010-10-30  

我在网上搜了下，expression确实有缺陷，而且iE8.0就把它给废除了（不过IE8也支持透明了呢）。
我在网上搜了下，这方面讲的一箩筐一箩筐的，好多方法啊！看看回头自己能不能找个相对简单点的……
不过这个方法还是可以用的，网上恐怕也没个完美的吧……

13 楼 lbsnd 2010-10-29  

用expression不太好吧，会影响到整个页面的速度，你鼠标动一下，他就会算一下！最好用js来实现，css样式的话是一样的

12 楼 interjc 2010-10-27  

这个是有证据的，你可以去搜一下，以前看过有人通过实验证明了，并从原理上说明了。
我这里就不复制粘贴了。

JE里面就有这么一篇：http://ilovejsj.iteye.com/blog/610689

11 楼 yuanjianhang 2010-10-27  

不知道楼上说的有没有证据呢？如果是这样，还是跟js的文件对比下好。
本来引用js也可以搞定的，我就是嫌js麻烦，才喜欢这个方法的，expression的效率问题自己还真是没考虑过呢！
谢谢楼上的提醒啦！

10 楼 interjc 2010-10-27  

css里面使用expression效率异常低下，不如直接js，当然这个方法在自己无法修改js只能修改css的时候还是很有用的

9 楼 yuanjianhang 2010-10-27  

哎，让IE6退出市场这个问题也很无奈啊，毕竟还有好几个浏览器用的还是IE6的内核啊！

8 楼 interjc 2010-10-26  

ie6所有的处理png的方法都不完美，而且会带来巨大的性能问题。
指望xp用户放弃ie6看来是不可能了，只能期待全民换电脑变win7了

7 楼 yuanjianhang 2010-10-26  

恩……
blueion说gif图片有毛边，gif图片就是这个性质，这是由它的格式决定的，谁也改变不了。
所以说，对于比较小的图片需要透明的话，可以用png-8（就是8位的png图片，Photoshop里可以存储）代替gif图。
对于比较大的图片，用png-8位的图片，就很模糊，就必须用png-24位的了。兼容的方法就用我文章里说的吧！

6 楼 yuanjianhang 2010-10-26  

IE6.0有时候是很讨厌，但是时间长了对它的bug也就熟悉了，也就没那么厌烦IE6了！呵呵！

5 楼 davepkxxx 2010-10-26  

我想起一个讨厌的工具包iepngfix

4 楼 blueion 2010-10-26  

IE下，半透明边gif有毛边楼主有办法处理不？

3 楼 jordan_micle 2010-10-25  

我通常会劝导客户不要用IE6访问我的系统。

and it work!!!!!

2 楼 black.angel 2010-10-25  

我在想这该死的IE6什么时候可以被终结

1 楼 zyandu 2010-10-25  

<div class="quote_title">yuanjianhang 写道</div>
<div class="quote_div">
<p>现在解决IE6下png图片的透明问题。</p>
<p> </p>
<p>首先，说明下,IE6不是不支持png透明，IE6可以支持8位的png透明图片，只是不支持24位的png透明。</p>
<p>如果一般是小图片的话，存储成8位的png图片就可以用。具体步骤如下：</p>
<p>图片切好后，记得一定要背景透明，然后“文件”、“存储为web所用格式”，然后在右边的下拉框中选择“png-8位”，然后一步步确定就可以了。</p>
<p>小图片也可以用gif图片，不过有些图片会产生锯齿。具体用哪个要看情况而定！</p>
<p> </p>
<p>下面步入正题：</p>
<p> </p>
<p><span style="color: #ff0000;"><strong>1.png图片的透明。</strong></span></p>
<p> </p>
<p>这种图片是以img的形式插入到网页中的。要解决这类图片的透明问题，只需要给这个图片一个class=“png”类，具体应用如下：</p>
<p>html代码：</p>
<p><span style="color: #0000ff;">&lt;img src="" class="png" /&gt;</span></p>
<p>css代码如下：</p>
<p><span style="color: #0000ff;">img.png {background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "<span style="color: #ff0000;">images/1.gif</span>")} </span></p>
<p><span style="color: #ff0000;">注意这里的1.gif图片是一个新的引入的图片。放入到相应的文件夹里即可。文章的下面的压缩包就是1.gif的图片。</span></p>
<p> </p>
<p><span style="color: #ff0000;"><strong>2.png背景图片的透明</strong></span></p>
<p> </p>
<p>这类图片的应用格式如下：</p>
<p>html代码：</p>
<p>要给.content这个div一个透明png的背景：</p>
<p>&lt;div class="content"&gt;&lt;/div&gt;</p>
<p>css样式如下：</p>
<p><span style="color: #ff0000;">background:url(images/<span style="color: #0000ff;">touming.png</span>);_background-image:url(</span><span style="color: #0000ff;">yuanjianhang.iteye.com</span><a href="http://www.);BACKGROUND"><span style="color: #ff0000;">);background</span></a><span style="color: #ff0000;">: none transparent scroll repeat 0% 0%; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/<span style="color: #0000ff;">touming.png'</span>,sizingMethod='scale');</span></p>
<p> </p>
<p> 上面这段代码中蓝色的代码是可以改变的，但是相关的属性千万不能删，比方说，你可以去掉<span style="color: #0000ff;">yuanjianhang.iteye.com</span><span style="color: #000000;">，但是绝对不能把_background-image：给去掉。</span></p>
<p> </p>
<p>这里说明下，用png背景图片，不可以进行相关的定位，只能是默认的：background：url（） left top；</p>
<p> </p>
<p>还有一个重要的问题，用了这段样式，很可能.content里面的超链接等内容不可以点击，解决这个问题，你可以在div.content里面在套一个div，比方这个div的样式名字为：div.con,然后给.con一个样式：</p>
<p>div.con {position:relative}就可以解决所有的问题了。</p>
<p> </p>
<p> </p>
<p><span style="color: #ff0000;"><strong><span style="text-decoration: underline;">这个下面的压缩包是上面提到的1.gif图片：</span></strong></span></p>
<p><strong></strong></p>
<p><strong></strong></p>
<p> </p>
</div>
<p> </p>