png图片有很好的品质，阴影效果也不会有杂边，很流畅。如果插入网页的话可以给网站增色不少。更重要的是，在不增加图片容量大小的情况下，提高了页面图片的质量。对于有复杂背景，如在有颜色过度背景上插入不规则边框的图片带来极大很便利!
但目前IE下对于插入的透明背景的png图片是不能正常显示的。IE会自动给png格式的图片加上一个灰色背景。解决这个问题有两种方法。
第一种方法：把下面的javascript代码加入网页的<head>与</head>之间，这样网页中所有透明背景的png图片都可以正常显示：(经一叶扁舟测试可以）
<script language="javascript">
function correctPNG() 
{
for(var i=0; i<document.p_w_picpaths.length; i++)
{
 var img = document.p_w_picpaths[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.p_w_picpaths.length; j++)
       {
           var img = document.p_w_picpaths[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>

转载于:https://blog.51cto.com/hmlwl/1166985

IE6下png图片透明代码相关推荐

  1. IE6下PNG图片透明效果(PNG图片做背景也可以)

    懒人萱在这里保证发的文章都是高质量的经过测试的JS代码,而且IE6.IE7和火狐都兼容的,希望大家多多关注我的帖子,我会把我的经验都共享出来哦! 懒人萱在寻找PNG图片透明效果的JS特效代码的时候,发 ...

  2. 新分享一种解决ie6下PNG图片透明的方法

    IE6中的图片不透明问题一直困扰着广大设计从业者们,前段时间已经分享了一种使用HTC文件解决的方法和使用滤镜使png背景图片透明的方法,今天再分享一种使用脚本代码使PNG图片在IE6中透明的办法. 脚 ...

  3. 处理IE6下PNG图片透明背景问题

    由于历史原因,IE较早的版本不支持PNG透明 可以支持GIF等的透明 由于png图片相对较小,所以很多网站还是青睐于PNG图片 最近就遇到这种情况,使用js和css滤镜来实现的与大家分享一下下: 首先 ...

  4. 解决IE6中 PNG图片透明的终极方案-八种方案！

    "珍惜生命,远离IE6",IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放 ...

  5. ie6 下最佳 PNG透明方案【转】

    "咳! 哎!-.. " 你听见了么? 这些都是大家抱怨IE6下不能实现png图片漂亮的明效果的哀叫声,的确是无奈呀-.. 不过现在幸运的是,我们能够让这一切的抱怨都停止. 网络上解 ...

  6. typora 主题 背景图片 透明代码块

    一段时间没有使用 typera ,发现打不开,要求更新,然后自己之前修改的 css 主题也显示不了了. 所以在这里存一下. 具体就是: 1. 关于背景图片 :root {/* 背景图片 */backg ...

  7. 图片透明代码html5,javascript – 透明图像背景html5画布

    使用该图像以及Mac上最新的Firefox和Chrome测试版中的以下代码,对我来说效果很好. (除了图像本身有一些白色不透明像素,你可以通过在深色背景上打开,例如在Firefox中看到.) var ...

  8. 解决png图片在IE6下的透明问题

    已经几天没更新博客了,也就是这几天学习上的进账收效甚微,原因是在准备毕业答辩的事,还有两天时间用在了跑去东莞面试,面试的结果很悲催呵呵.自己其实自我感觉还过得去吧,至少能工作,但就是自己还不够自信,在 ...

  9. Form表单提交按钮图片IE6下背景透明（js提交）

    Form表单提交按钮图片IE6下背景透明(js提交) 我们知道 光png图片在IE6下面透明方法很多,网上也很多,但是我今天遇到了个难题:form表单提交按钮png图片要求背景透明.我弄了半天,转个思 ...

最新文章

  1. 20165219王彦博《基于Cortex-M4的虚拟机制作与测试》课程设计个人报告
  2. getRunningTasks和getRunningAppProcesses失效
  3. 用Qt开发游戏时一些问题的解决方法（一）
  4. ReactOS 架构
  5. Git之常用的高效处理技巧
  6. 图说：为什么Java中的字符串被定义为不可变的
  7. LeetCode 251. 展开二维向量
  8. Docker是传统的应用发布管理的终结者么？
  9. CANopen | 对象字典OD 04 - 创建对象字典的变量(映射变量）
  10. Docker笔记四 发布自制DockerImage 到 Dockerhub
  11. kill apache
  12. MariaDB Audit  Statistics
  13. B00012 C++算法库的sort()函数
  14. 无法读源文件或磁盘_持久化（3）：磁盘阵列
  15. ubuntu从源码编译安装python
  16. 0xC0000005: 读取位置 xxx时发生访问冲突
  17. veu——引入iconfont图标
  18. 盘点安卓手机被吐槽最多的三大奇葩设计
  19. Vue实现拖拽拼图滑块验证
  20. Selenium元素定位方法总结

热门文章

  1. 数据库之关系模型的组成，特点以及完整性约束
  2. 贴花纸怎么贴_木纹纸怎么贴? 贴木纹纸的方法与详细步骤
  3. power shell远程_PowerShell入门教程之远程操作运行PowerShell的方法
  4. oracle+nvlif函数,Oracle中的NVL()、NVL2()、NULLIF()、Coalesce()函数
  5. 小站教育携手神策数据，数据赋能留学语言培训教育的智能化探索
  6. win linux 装系统 通过 u盘
  7. 你是如何保护用户的密码的？
  8. Chrome DevTools：在 Profile 性能分析中显示原生 javascript 函数
  9. IE6 png背景图片显示不正常处理
  10. 最新OpenSSL漏洞CCS注入及升级修复