职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 551|回复: 9

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

[复制链接]
紫衿 发表于 2011-6-12 09:57 | 显示全部楼层 |阅读模式
现在解决IE6下png图片的透明问题。

首先,说明下,IE6不是不支持png透明,IE6可以支持8位的png透明图片,只是不支持24位的png透明。
如果一般是小图片的话,存储成8位的png图片就可以用。具体步骤如下:
图片切好后,记得一定要背景透明,然后“文件”、“存储为web所用格式”,然后在右边的下拉框中选择“png-8位”,然后一步步确定就可以了。
小图片也可以用gif图片,不过有些图片会产生锯齿。具体用哪个要看情况而定!

下面步入正题:

1.png图片的透明。

这种图片是以img的形式插入到网页中的。要解决这类图片的透明问题,只需要给这个图片一个class=“png”类,具体应用如下:
html代码:
  1. <img src="" class="png" />
  2. css代码如下:
  3. 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样式如下:
  1. 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}就可以解决所有的问题了。



叫我小乖 发表于 2011-6-12 09:57 | 显示全部楼层

现在解决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代码如下:
  1. 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样式如下:
  1. 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}就可以解决所有的问题了。





会玩就好 发表于 2011-6-12 09:57 | 显示全部楼层
我在想这该死的IE6什么时候可以被终结

无处不在 发表于 2011-6-12 09:57 | 显示全部楼层
我通常会劝导客户不要用IE6访问我的系统。

and it work!!!!!

jinchang 发表于 2011-6-12 09:58 | 显示全部楼层
IE下,半透明边gif有毛边楼主有办法处理不?

gz-vps 发表于 2011-6-12 09:58 | 显示全部楼层
我想起一个讨厌的工具包iepngfix

gz-vps 发表于 2011-6-12 09:58 | 显示全部楼层
IE6.0有时候是很讨厌,但是时间长了对它的bug也就熟悉了,也就没那么厌烦IE6了!呵呵!

jinchang 发表于 2011-6-12 09:58 | 显示全部楼层
恩……
blueion说gif图片有毛边,gif图片就是这个性质,这是由它的格式决定的,谁也改变不了。
所以说,对于比较小的图片需要透明的话,可以用png-8(就是8位的png图片,Photoshop里可以存储)代替gif图。
对于比较大的图片,用png-8位的图片,就很模糊,就必须用png-24位的了。兼容的方法就用我文章里说的吧!

愚人 发表于 2011-6-12 09:59 | 显示全部楼层
ie6所有的处理png的方法都不完美,而且会带来巨大的性能问题。
指望xp用户放弃ie6看来是不可能了,只能期待全民换电脑变win7了

爱车车 发表于 2011-6-12 09:59 | 显示全部楼层
哎,让IE6退出市场这个问题也很无奈啊,毕竟还有好几个浏览器用的还是IE6的内核啊!


您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-5-3 20:16 , Processed in 0.143446 second(s), 24 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表