zoukankan      html  css  js  c++  java
  • 解决IE6下透明PNG图片有灰底的解决方案

    参考:

    http://jquery.andreaseberhard.de/pngFix/
    http://www.dillerdesign.com/experiment/DD_belatedPNG/#background_properties
    http://www.iteye.com/topic/864893
    http://www.cnblogs.com/heiniuhaha/archive/2011/11/23/2260146.html
    http://blog.donews.com/jiji262/2011/05/ie6-png-fix/

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>解决IE6下透明PNG图片有灰底的</title>
    <script language="javascript" type="text/javascript"> 
    /*
    参考:http://jquery.andreaseberhard.de/pngFix/
    http://www.dillerdesign.com/experiment/DD_belatedPNG/#background_properties
    http://www.iteye.com/topic/864893
    http://www.cnblogs.com/heiniuhaha/archive/2011/11/23/2260146.html
    http://blog.donews.com/jiji262/2011/05/ie6-png-fix/
    */
    //涂聚文注示:注意,这方法也是只对直接插入的顯示图片有效,对背景图无效
    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.images.length; j++) 
           { 
              var img = document.images[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=\"" + "" + 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> 
     
    
    <style type="text/css">
    /*涂聚文注示:IE6背景图片透明显示方式*/
    .Image{
    /*
    这种方式也可以
    background-image: url(images/101.png)!important;/* FF IE7 */ 
    /*	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="images/101.png"); 
        _ background:none;  
    */
    height: 55px; 
     172px; 
    background-image: url(images/101.png)!important;/* FF IE7 */ 
    background-repeat: no-repeat; 
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/101.png'); /* IE6 */ 
    _ background-image: none; /* IE6 */ 
    
    }
    .bg1 {
    	background-repeat: repeat;
    	background-position: right top;
    	background-image: url(images/bg.jpg);
    }
    body {
    	background-image: url(images/206.png);
    }
    
    </style>
    </head>
    
    <body class="bg1">
    背景图片:
    <div class="Image"></div>
    <br/>
    <table width="937" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/101.png" name="Image1" class="Image1" width="172" height="55" border="0" id="Image1" /></td>
    </tr>
    </table>
    </body>
    
    </html>
    
    哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)成功.---Geovin Du(涂聚文)
  • 相关阅读:
    Unity3d热更新全书-加载(一)从AssetBundle说起
    Unity3D热更新全书-脚本(三) C#LightEvil语法与调试
    Unity3D热更新全书-脚本(二) 两级分化
    Unity3D热更新全书-脚本(一) 初识脚本
    Unity3D热更新全书-何谓热更新,为何热更新,如何热更新
    C#Light/Evil合体啦
    C#最良心脚本语言C#Light/Evil,XamarinWP8Unity热更新最良心方案,再次进化.
    C#Light 再推荐,顺便介绍WP8 功能展示项目
    任意两张带透明图像的一种形状过渡效果
    FileFilter
  • 原文地址:https://www.cnblogs.com/geovindu/p/2375191.html
Copyright © 2011-2022 走看看