解决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/

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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=\"" + "width:" + 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;
width: 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>

 

posted @   ®Geovin Du Dream Park™  阅读(559)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
< 2012年3月 >
日 一 二 三 四 五 六
26 27 28 29 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
1 2 3 4 5 6 7
点击右上角即可分享
微信分享提示