前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 经验记录 » 目前最佳ie6下png透明解决方案

目前最佳ie6下png透明解决方案

发布者:前端集合 // 发布时间:2009-09-25 20:25:30 // 分类:经验记录 // 访问: 782 次 // 热度: 0人参与

关于ie6下png图片的透明问题,市面上有很多的解决方案【我在前面写过2篇相关文章(透明png在ie7显示为黑色背景的解决办法关于ie6中使用css滤镜后链接无法点击的问题)】,主要有以下2种:

(1)、js修复法:

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src="/'"" + img.src + "', sizingMethod='scale');"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);

(2)、css滤镜法:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/**.png");

上面2中方法都有一些缺陷。如链接失效问题,虽说可以用position:relative来修复,但是不一定百分百管用。

今天我主要介绍一种更加完美的解决办法,那就是

DD_belatedPNG

如何使用:

1、先点击上面的链接去下载DD_belatedPNG.js,里面有一种压缩版本,一种未压缩版本。你下载哪个都行,下哪个在网页引用js的时候就用哪个的文件名。

2、在页面中应用js:

<!--[if IE 6]>
<script src="DD_belatedPNG.js" src="DD_belatedPNG.js" src="DD_belatedPNG.js" src="DD_belatedPNG.js"></script>
<script type="text/javascript"><!
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');

/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->
<!--[endif]-->

3、ok!

Tags: ie7, ie6, png透明, DD_belatedPNG, JavaScript, jQuery

如何让ecshop支持一次购买多个商品>>  << 将z-blog文章归档改为下拉菜单
Top