让IE6支持png 透明的多种解决

来源:百度文库 编辑:神马文学网 时间:2024/03/28 22:00:03

有时候我们会用半透明png格式的图片做为背景图,来达到一定的设计和视觉效果,但在IE6下是不支持透明png图片的。

可参阅http://www.alistapart.com/articles/pngopacity/

综合网上的解决方法,和自己的实例,有以下方法:
一:
那么就可以用到Microsoft 的专有滤镜如下:
.class
{
 filter: progid:DXImageTransformMicrosoft.AlphaImageLoader(enabled=true,   src="/img/bg_alpha.png");

background:none;
}
由于对web 标准支持较好的Firefox等浏览器不识别“progid:DXImageTransform.Microsoft.AlphaImageLoader

(enabled=true,   src="/img/bg_alpha.png”,而Firefox是支持透明png的,所以css样式需要这样写:
.class{
width:100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,  

src="http://imgcache.qq.com/MiniMusic_v1_2/act/avril/img/mv_listitem_bg.png"); background:none;
}

* html .class
{
width:100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,  

src="http://imgcache.qq.com/MiniMusic_v1_2/act/avril/img/mv_listitem_bg.png"); background:none;
}

这样就完成了兼容Firefox和IE6的透明png背景图片。
但还有一个问题,当你在有这样定义的容器标签里包含一些超链接的时候,就会发现在IE6中,这些A标记是无效的,解

决这个问题只需要在A标记的css样式单里加上一句 :position:relative;
如下:
a{
color:#000;
text-decoration:none;
position:relative;
}
至此上述问题得到解决,目前只发现position:relative;这一种方法,如果你发现了其它的解决方案,请一定要拿出来

共享一下啊~

实例代码

#biaoqingtiao .span1 a,a:link{
position:absolute;
top:4px;
left:7px;
width:19px;
height:19px;
background:url(../images/1.png);
display:block;
}
* html #biaoqingtiao .span1 a,a:link
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="images/1.png");
background:none;
}

图片 1.png就透明了。嘿嘿

二:

FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的

第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了。(注意两处图片的路径写

法不一样,本例中,icon_home.png图片与html文件在相同目录)

transitional.dtd">

link="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">


无标题文档






第 2 种方法: 给img定义样式,页面上所有透明png即自动透明了。(这方法只对直接插入的图片有效,对背景图无效)

注意,要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
请勿大量使用,否则会导致页面打开很慢!!!)

transitional.dtd">

link="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">


无标题文档



换成你的png图片







三:

第 3 种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.(注意,这方法也是只对直接插入的图片有

效,对背景图无效)

transitional.dtd">

link="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">


无标题文档



把图片换成你自己的图片




    

 

四:


用法如下:

另:

用Js实现IE6支持png图片透明效果
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function fixPNG(myImage)
{
    if ((version >= 5.5) && (version < 7) && (document.body.filters))
    {
       var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
    var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
    var imgTitle = (myImage.title) ?
               "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "
    var imgStyle = "display:inline-block;" + myImage.style.cssText
    var strNewHTML = "                  + " style=\"" + "width:" + myImage.width
                  + "px; height:" + myImage.height
                  + "px;" + imgStyle + ";"
                  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\">
"
    myImage.outerHTML = strNewHTML  
    }
}
使用方法 :

在模板的 段里加上[注意你的路径.]


在要透明的 png 的地方格式为:

foo
注意, 你的图片的高与宽是不能去掉的! 就是多了 onload="fixpng(this)" 而已.

 

http://hi.baidu.com/%D5%EA%C7%BF/blog/item/f133f217aa3e0701c93d6dda.html
http://www.cnblogs.com/xuyi/articles/1033777.html 总结:http://blog.gaoso.com.cn/2009/07/571.html看看这种吧。挺好用的,我已测试过了。还有一种省事的办法就是把图片做成gif.哦,还可以这样:http://hi.baidu.com/%BA%FE%C4%CF%B9%BA%CE%EF%CD%F8/blog/item/562f3af33f0a6b59352acca2.html这个脚本是可用的。可是这样做后。图片无法定位了,也就是无法使用 background-image: url(images/ssj.png);background-position: -24px 318px;no-repeat; http://blog.gaoso.com.cn/2009/07/575.html