<!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. ural1067 Disk Tree

    Disk Tree Time limit: 2.0 secondMemory limit: 64 MB Hacker Bill has accidentally lost all the inform ...

  2. 升级版本后报这个异常 ： org.springframework.beans.factory.NoUniqueBeanDefinitionException

    今天写代码时出现上面这个异常,很是奇怪.从网上下载了个Spring源码包,通过追踪源码发现并没有到加载工程代码中去.于是分析和Spring包有关系. 查看依赖库发现有两个版本的Spring.通过分析去 ...

  3. JS检测图片的大小

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...

  4. mysql----快速删除数据表（drop,truncate.delete）

    概念: 三者均可删除数据表 TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 DELETE 速度快 ...

  5. 添加<!doctype html>后造成JS写的定位失效

    今天同事找了一个悬浮广告的插件,但是一放入页面中就失效了,也没有报错,后来通过原文件对比,发现是加了<!doctype html>. 这样子定位并不起效果: document.getEle ...

  6. OpenCV学习(20) grabcut分割算法

    http://www.cnblogs.com/mikewolf2002/p/3330390.html OpenCV学习(20) grabcut分割算法 在OpenCV中,实现了grabcut分割算法, ...

  7. The 2014 ACM-ICPC Asia Mudanjiang Regional

    继续复盘之前的Regional......出题者说这一套题太简单,对当时没有AK很不满......真是醉了,弱校没法活了 [A]签到题 [B]树结构,树的中心 [C]-_-/// [D]概率DP [E ...

  8. Hibernate---第一个helloworld程序 (XML版本, annotation版本)

    Hibernate作为JPA的一种实现,jpa的注解已经是hibernate的核心,hibernate只提供了一些补充,而不是两套注解.hibernate对jpa的支持够足量,在使用hibernate ...

  9. Android Camera 调用流程总结

    1.总体介绍  Android Camera框架从整体上看是一个client/service架构.有两个进程,一个是client进程,可以看成AP端,主要包括Java代码和一些native层的c/c+ ...

  10. C++异常第二篇---C++标准库异常类exception的使用

    1 继承图示 2 具体讲解 C++标准库异常类继承层次中的根类为exception,其定义在exception头文件中,它是C++标准库所有函数抛出异常的基类,exception的接口定义如下: na ...