<!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. Android ---paint类

    引自:http://www.cnblogs.com/-OYK/archive/2011/10/25/2223624.html Android Paint和Color类   要绘图,首先得调整画笔,待画 ...

  2. C# 开发技巧]如何防止程序多次运行 线程 进程

    程序员必有一些好习惯,我的就是看到好文章就收下 文章来源   http://www.cnblogs.com/zhili/p/OnlyInstance.html 转载请注明出处 最近发现很多人在论坛中问 ...

  3. 简单三段式状态机实验2-LCD12864

    此实验是在“基于I2C EPPRPM(AT24C02B) + LCD12864实验”基础上,把LCD模块里的一段式状态机改成三段式,I2C EPPROM模块暂时未改出来,一步一步来吧,改完后代码下载到 ...

  4. 原生的ajax（json）

    function getXHR(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ try{ return new Ac ...

  5. 首页布局时div的宽度设置要注意

  6. 【HighCharts系列教程】八、Html标签属性——Labels

    一.labels属性说明 Labels属性允许在HighCharts图表的任意位置添加任意的html代码.可以实现许多自定义内容. 二.labels属性详解 参数 子参数 说明 默认值 items — ...

  7. 一个简单但详细的解释Windows文件映射读取数据文件的例子

    #include <windows.h>#include <string.h>#include <string>#include <iostream>u ...

  8. struts2.0 s标签_小小鸟_百度空间

    struts2.0 s标签 1． Struts2页面开发中常用标签使用说明 1.1．往action里传值的使用方式: <input name="userName" type= ...

  9. (简单) UVA 11624 Fire! ，BFS。

    Description Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the ow ...

  10. C socket post数据到url

    #define HOST_SERVER_IP "192.168.1.15" #define HOST_PORT 80 int gsh_post_clients(const char ...