png图片带阴影解决方法补全

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。



把下面的代码放在head区就可以解决问题了。

以下是引用的内容:


也可以把这段代码单独加在一张图片上:

以下是引用的内容:
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png',sizingMethod='scale');">







1.下载iepngfix.zip,其中有三个文件:iepngfix.htc、iepngfix_tilebg.js、blank.gif,将这几个文件解压出来放到所需要使用png做为CSS背景的网站的根目录下。

2.假定一个div需使用png作为背景,标准的做法是:
#mydiv {
background:url(../img/main.png) no-repeat;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
}
此时该背景能在FF和IE7下正常显示,但是在IE6下会有恐怖的“灰边”。需要使用滤镜来解决。具体做法是使用上面提到的htc文件,在CSS样式的最后定义一个behaviro属性。新的的样式定义为:
#login_main {
background:url(../img/main.png) no-repeat;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
behavior: url("iepngfix.htc");
}
此时要注意url内的路径是相对于index.htm来说的,而不是相对于定义其样式的css文件。

3.在index.htm文件中需要引入上文中提到的第二个javascript文件,使用

插入到中

此时大功告成,使用IE6浏览index.htm文件看看效果,得意的笑吧。顺便提醒一句,对于普通IE6升级成IE7的XP用户,这两种 浏览器是无法在同一个操作系统中共存的,笔者比较愚笨,使用了SUN的virtual box装了一个WIN2K3,幸好virtual box提供全屏和无缝模式,使得虚拟机用起来还是蛮流畅的。

优化:
方案一:可

以发现,当需要用到的png图片比较多时IE6反应会有些迟钝,因为IE6每次加载需要透明的PNG时都会进行一系列的运算,将png中 的alpha透明部分用blank.gif空白位图代替,可以想象这样的计算规模有多庞大。没办法,这是无法避免的,Vista 和IE7早就出来了,还有非常卓越的FF可供选择,使用IE6的客户所占的份额总会渐渐下降的。观察一下,此时使用IE7打开刚刚index.htm可以 发现,本来非常完美而且不需要做任何改动的页面在IE7下也加载得特别慢,看来behaviro属性也影响到了IE7,让IE7也做了繁重的无用功。
此时我们的目标是将IE7解放出来,查阅各种浏览器的hack,发现只有IE6在CSS中能够认识下划线“_”,所以我们在刚刚的CSS样式中的 behaviro前加上一个下划线。而这个下划线无论是FF或者IE7都是不会去解析的,这样IE7就会忽略这个CSS属性,既而解放了IE7。
方案二:既然此次处理的目标就是IE6浏览器,所以在首页中的JS加载语句也可以加上一个小小的改动,加上“”标签,既而只针对IE6,而解放了其他浏览器,使它们在页面加载时就忽略 iepngfix_tilebg.js这个文件,提高效率。而可怜的IE6,让它接受暴风骤雨般的CPU消耗吧,没办法,爱莫能助了。
----------------------------------------------------------------------------------------------------------------------------------------------





【转自:/dr592112441/archive/2009/12/23/5056602.aspx】
实例:解决IE6下png透明失效的问题。
/*
兼容IE6.0、IE7.0、IE8.0、FF
IE7.0和新版的FF其实是可以不加filter滤镜直接透明的。
*/

CSS样式:
.png{
_background: url(/images/lg_gm2.png) no-repeat !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="/images/lg_gm2.png");
background:none;
width:211px;height:55px;
}
.png div{position:relative;}
HTML代码:



-----------------------------------------------------------------------------------------------------------------------------------------------------




【转自:/boral_li/archive/2009/05/04/4144365.aspx】
PNG(Portable Network Graphics)格式图片可以表现更为绚丽多彩的颜色,常见的一些具有矢量效果的图片、图标都采用png格式,但是具有透明背景的png格式图片在 IE6中却不是背景透明的,透明背景部分会显示出#DBEAED的淡灰色,表现效果很糟糕,为了使用透明背景图片只有采用gif格式了,但是gif格式会 出现明显的锯齿效果,所以只有设法修复IE6的这个问题。解决的办法就是使用IE的Microsoft.AlphaImageLoader滤镜。
方法一:
IE6与原本支持png8的索引色透明

度,但不支持png或8位以上的 alpha 透明度。对于非动画的GIF可以使用PNG8,同时体积也会更小。但这种办法是以牺牲图片质量为代价的,而且实施也不太容易!

--------------------------------------------------------------------------------

方法二:
如果希望使用png格式图片作为DOM元素的背景,那么就可以使用滤镜来加载png图片
.png{ background: url(/angel.png) no-repeat !important; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/angel.png"); background:none; width:100px; height:100px;}HTML代码:

背景PNG透 明
--------------------------------------------------------------------------------





以上代码使用了一些IE的Hack,IE7,IE8,Firefox直接应用_background,IE6则会应用filter!
方法三:
如果png格式的图片不是用来做元素背景,而是直接引入的img图像,那么方法二就无法应用了,那么此时可以把此img标签的src属性替换为一张空的透 明gif图像,然后再按照方法二把png图片加载为元素的背景就可以了。首先要准备一张空白透明的gif图片,一般命名为blank.gif或 space.gif或transparent.gif,然后就可以替换png图像了。但是手工替换不太现实,最好一段代码就解决问题:


替换pngtitle><br><style type="text/css"><br>.mypng img {<br>azimuth: expression(<br>this.pngSet?this.pngSet=true:<br>(this.nodeName == "IMG" &&<br>this.src.toLowerCase().indexOf('.png')>-1?<br>(this.runtimeStyle.backgroundImage = "none",<br>this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",<br>this.src = "transparent.gif")<br>:(this.origBg = this.origBg?<br>this.origBg<br>:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),<br>this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",<br>this.runtimeStyle.backgroundImage = "none")),<br>this.pngSet=true);<br>}<br>style><br>head><br><body><br>换成你的png图片<br><div class="mypng"><br><img src="icon_face_07.png" width="30" height="30" /><br><img src="icon_face_10.png" width="30" height="30" /><br><img src="icon_face_08.png" width="30" height="30" /><br><div><br><body><br><html>--------------------------------------------------------------------------------<br>以上代码使用了仅IE支持的CSS表达式完成替换与设置滤镜背景的工作。<br>同样的工作也可以由Javascript来完成:<br><br><br><br>-------------------<br></p><p>-------------------------------------------------------------<br><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br><title>自动替换png图片



把图片换成你自己的图片




--------------------------------------------------------------------------------
以上代码采用Javascript遍历页面中的png图像,并实现替换功能!




方法四:
在页面上注入Javascript代码并执行还是不太方便,因此可以把这些Javascript代码封装为htc,并设定浏览器的缺省行为即可实现同样的功能,常用的htc即iepngfix.htc
–[if lte IE 6]>