<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>IE6-png透明度效果测试</title>
    <style type='text/css'>
        .bg-png{/*这是logo所在top栏的背景图片引用*/
            background: url(topbarbg.jpg) no-repeat left top;
            height: 80px;
            position: relative;
        }
        /*.bg-png img{//注意这里，应用了透明度js后再这样写logo定位在IE6下没有效果，只有写行内样式到img标签中才行
            position: absolute;
            top: 20px;
            left: 40px;
        }*/
    </style>
</head>
<body>
    <!-- <div class="box"></div> -->
    <div class="bg-png" >
        <img src="logo.png" alt="" width="331" height="47" style="position:absolute;top:15px;left:40px;" />
    </div>
    
</body>
<!-- 兼容IE6图片背景圆角和阴影效果的插件必须在服务器环境下才能浏览 -->
<script type="text/javascript">
        function correctPNG()//改方法会自动获取img标签里面的图片进行去背景处理，所以要注意这段js只针对img图片
        {
        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>

</html>
上面的js代码段已封装成correctpng.js放到360云盘的IETest目录中。

IE6-能让png图片有透明效果的js代码的更多相关文章

  1. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  2. CAGradientLayer实现图片渐变透明效果

    CAGradientLayer实现图片渐变透明效果 要实现的效果如下: 源码: // // RootViewController.m // CAGradientLayer // // Copyrigh ...

  3. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  4. ie6下：png图片不透明 和 背景图片为png的节点的内部标签单击事件不响应

    1.png图片不透明 少量图片时:使用滤镜: _background:none; _filter:prodig:DXImageTransform.Microsoft.AlphaImageLoader( ...

  5. 通过input上传图片，判断不同浏览器及图片类型和大小的js代码

    1.jsp页面代码 <form id="userPhoto" name="userPhoto" method="post" actio ...

  6. 小程序 - 图片列表显示lazyload效果

    在做一个短视频平台,涉及到的都是一些列表模块.因为小程序没有提供lazyload api,所以只能自己写一个了... 开发涉及 <scroll-view></scroll-view& ...

  7. 解决IE6下不支持 png24的透明图片问题

    常用的两种解决方案: 第一:使用IE滤镜解决 关键代码: css代码  _background:none;_filter:progid:DXImageTransform.Microsoft.Alpha ...

  8. 解决全站ie6下PNG图片不透明问题只要几行代码

    解决全站ie6下PNG图片不透明问题只要复制下面这几行代码粘贴在你的文档最底部,需要用到的包DD_belatedPNG_0.0.8a.js自己网上下载吧 代码走起 /*在文档底部加入以下代码*/ &l ...

  9. 关于ie6 下背景图片不透明以及Img不透明

    ie6 下背景图片不透明的方法,加上下面的js即可解决 //解决IE6下图片不透明 function correctPNG() // correctly handle PNG transparency ...

随机推荐

  1. GPRS的工作原理、主要特点

    源:http://blog.csdn.net/sdudubing/article/details/7682467 GPRS的工作原理.主要特点: 引 言 近年来,通信技术和网络技术的迅速发展,特别是无 ...

  2. c# 错误 两个输出文件名解析为同一个输出路径

    检查同项目的其他文件夹下面已有其他同名窗体,影响设计器

  3. JSP中EL表达式取值问题记录（已解决）

    ***************************2015-10-28 22:21************************* 问题描述如下: 在当前的jsp页面已经有了如下代码: < ...

  4. java项目开发第六天——天若有情天亦老，人间正道是沧桑

    今天讲解的东西是数据库连接,一天下来还是相对轻松的,这个组长也是够轻松的,队员加载的界面自己也是导入不了,最后也是不了了之,还是加油赶赶吧.看看严嘉那组的界面,最后就是呵呵.但是学长看完后(研究生,同 ...

  5. 计算机学院大学生程序设计竞赛（2015’12） 1004 Happy Value

    #include<cstdio> #include<cstring> #include<cmath> #include<vector> #include ...

  6. 关于python 函数参数

    函数参数:必选参数.默认参数.可选参数.关键字参数 1.默认参数 默认参数可以简化函数的调用.设置默认参数时,有几点要注意: 一是必选参数在前,默认参数在后,否则Python的解释器会报错: 二是如何 ...

  7. [数据结构]Treap简介

    [写在前面的话] 如果想学Treap,请先了解BST和BST的旋转 二叉搜索树(BST)(百度百科):[here] 英文好的读者可以戳这里(维基百科) 自己的博客:关于旋转(很水,顶多就算是了解怎么旋 ...

  8. winutils spark windows installation

    http://stackoverflow.com/questions/37305001/winutils-spark-windows-installation

  9. iOS之Nib和Xib以及storyboard（故事版）

    本文转发至:http://blog.csdn.net/tonny_guan/article/details/8542789 nib.xib与故事板 如果大家使用过苹果的官方资料,一定会发现某些资料上会 ...

  10. openstack controller ha测试环境搭建记录（六）——配置keystone

    在所有节点的hosts文件添加:10.0.0.10 myvip 在所有节点安装# yum install -y openstack-keystone python-keystoneclient# yu ...