<!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. android4.0蓝牙使能的详细解析（转）

    源:http://www.cnblogs.com/xiaochao1234/p/3818193.html 本文详细分析了android4.0 中蓝牙使能的过程,相比较android2.3,4.0中的蓝 ...

  2. 用JavaScript 来将数字转换成字符。

    背景: 一切嵌入式设备上面的信息,比如设备名称,设备时区是可以写入到设备上面的寄存器中的(一个寄存器两个字节,2*8 bit),比如 -1 ,写入到寄存器中为 2d31,然后可以通过一些进程将寄存器中 ...

  3. automaticallyAdjustsScrollViewInsets 标签栏不正常显示

    想做的效果如下: 结果那个首页.手办模型神马的就是不显示啊... 这个标签栏是用scrollView做的,解决办法: viewController.automaticallyAdjustsScroll ...

  4. CALayer 进阶

    转载自:http://www.cofcool.net/development/2015/06/19/ios-study-note-eight-CALayer-info/ The CALayer cla ...

  5. HDU 1754 I Hate It（线段树基础应用）

    基础线段树 #include<iostream> #include<cstdio> #include<cstring> using namespace std; # ...

  6. 试题公式解决方案--kindeditor集成jmeditor公式web编辑器

    最近在搞一套在线的考试系统,一直为即支持公式编辑又得支持各种附件上传.图片上传.视频音频上传.文字编辑 的web编辑器而犯愁.于是乎试着把 kindeditor和jmeditor集成一下,多了不说了直 ...

  7. Bootstrap Table的使用

    前言:BootstrapTable基于Bootstrap,Bootstrap基于jquery,所以需要引入jquery后再引入bootstrap. <link href="${ctx} ...

  8. Ubuntu iptables 设置

    在ubuntu中由于不存在 /etc/init.d/iptales文件,所以无法使用service等命令来启动iptables,需要用modprobe命令. 启动iptables modprobe i ...

  9. Sping--AOP--XML

    IoC: annotation AOP: XML XML比annotation用的多. beans.xml: <?xml version="1.0" encoding=&qu ...

  10. openstack controller ha测试环境搭建记录（二）——配置corosync和pacemaker

    corosync.conf请备份再编辑:# vi /etc/corosync/corosync.conf totem {        version: 2 token: 10000        t ...