修复IE 下PNG 图片不能透明显示的问题

 
正在载入,请稍候……
  昨晚在修改畅易网盘的下载页面,背景色为淡淡的的土黄色,然后要添加一张图片,把图片做成PNG透明的了,但是在IE6下却会显示出恶心的灰白背景,在火狐、Opera、IE7等浏览下面是正常的,能显示出透明的,IE6以前的版本都不能支持PNG透明是个BUG,而做成gif的,图片边缘会有白色噪点也不好看了,那有没有办法解决这个问题呢?

  谷歌了一下,找到了很多方法,有用滤镜的,有用JS代码结合css实现的,js代码也有好多种,我逐一测试了这些方法,首先在css加入滤镜效果测试没效果,而且不是对所有浏览器都有效,就试试了js。多种多样的js,去繁从简,用最剪短的js配合css是最方便的了,代码如下:

  以我那个畅易下载页面为例子,效果如上面的“文件下载”图片,简述如下 ---

  首先在<head></head>或者<body></body>之间加入:
  
程序代码 程序代码
<script type="text/javascript">
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage)
{
    var arVersion = navigator.appVersion.split("MSIE");
    var version = parseFloat(arVersion[1]);
    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 = "<span " + imgID + imgClass + imgTitle+ " style=\"" + "width:" +

myImage.width+ "px; height:" + myImage.height+ "px;" + imgStyle + ";"+

"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"+ "(src=\'" + myImage.src + "\',

sizingMethod='scale');\"></span>";
   myImage.outerHTML = strNewHTML;
}
}
</script>

  也可以把上面的代码存成js格式文件,以<script type="text/javascript" src="bgpng.js"></script>形式调用,现得页面代码精简些了。
  
  然后在需要透明的图片属性那加入onload="fixPNG(this)" ,如:

  <div id="bgpng"><img src="http://jogocun.cech.com.cn/images/bg.png" onload="fixPNG(this)" /></div>

  最后可根据需要在css中添加:#bgpng{left:375px;top:131px;position:absolute;} 就可以了。关键是那段js以及img属性onload="fixPNG(this)" ,其它的就是自己定义的css样式了,现得美观些吧。 谷歌AD正在载入,请稍候……
点此快速转到评论处,留下您的宝贵见解吧^_^

本文如需转载,请详细注明出处,尊重版权,尊重别人的劳动成果,谢谢合作哦!
Google内容AD正在载入,请稍候……

相关日志
详细信息
日志搜索
推荐收藏
反向链接
本站声明

    相关日志:

     
评论: 2 | 引用: 0 | 查看次数: 11481 | 打印此页 | 关闭此页 | 返回顶部 | 直达底部
评论列表 ↓ 点击显示/隐藏2条博友们的评论
发表评论

① 若您已是本站注册用户,请填入名称和密码,发表留言后即默认登陆.
② 若您尚未在本站注册,为了保护您的发言权,建议您注册账号,进而保护您的名称在本站不被他人所占用.若未特别说明,本站原创或转载的文章,均遵循创作共用协议.^_^
③ 若您不想注册,可以只填写用户名进行发表.
④ 转载本站文章,请注明出处,或者填写文章的引用通告地址,谢谢!
⑤ 本站注册是免费,自由的,但发表 评论/留言 即默认您遵守本站用户协议.
你没有权限发表评论!响应党的号召,十七大期间关闭评论功能