博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
IE6下png图片透明代码
阅读量:6843 次
发布时间:2019-06-26

本文共 2793 字,大约阅读时间需要 9 分钟。

png图片有很好的品质,阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站增色不少。更重要的是,在不增加图片容量大小的情况下,提高了页面图片的质量。对于有复杂背景,如在有颜色过度背景上插入不规则边框的图片带来极大很便利!
  但目前IE下对于插入的透明背景的png图片是不能正常显示的。IE会自动给png格式的图片加上一个灰色背景。解决这个问题有两种方法。
  第一种方法:把下面的javascript代码加入网页的<head>与</head>之间,这样网页中所有透明背景的png图片都可以正常显示:(经一叶扁舟测试可以)
<script language="javascript">
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);
</script>
第二种方法:把下面的代码加在网页中的png图片显示代码中:
<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片名称.png',sizingMethod='scale');"></span>
 
 
第三种 在头部加入
    <script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
     var arVersion = navigator.appVersion.split("MSIE")
     var version = parseFloat(arVersion[1])
     if ((version >= 5.5) && (document.body.filters)) 
     {
       for(var j=0; j<document.images.length; j++)
       {
           var img = document.images[j]
           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
             j = j-1
           }
       }
     }    
}
window.attachEvent("onload", correctPNG);
</script>
本文转自 yeybz 51CTO博客,原文链接:http://blog.51cto.com/hmlwl/1166985

转载地址:http://bzcul.baihongyu.com/

你可能感兴趣的文章
Flex 动态创建 多个曲线图/柱形图 ColumnSeries
查看>>
http中post和get的区别
查看>>
从硬盘安装ubuntu的方法
查看>>
TCPDUMP中文手册
查看>>
apache 403 forbidden 错误解决方法
查看>>
ERP实施流程-步骤
查看>>
谈Excel的一些操作
查看>>
24.NAT地址转换技术
查看>>
mahout所实现的算法
查看>>
MFC中的CListCtrl网格控件添加行
查看>>
orzdba安装与使用
查看>>
Ansible API 2.0的测试
查看>>
LVS的三种负载均衡技术,八大负载调度算法
查看>>
linux 常用小命令
查看>>
AIX系列------ISO挂载
查看>>
数据库笔记10:插入数据 创建和操纵表
查看>>
重启citrix服务器,无法打开发布的程序
查看>>
cygwin openssh for windows
查看>>
按照文件名中包含的版本号信息对文件名列表进行排序
查看>>
jQuery学习笔记3:过滤器
查看>>