[HTML/CSS] 针对IE6下面PNG图片不透明的解决方法   [复制链接]

楼主: zwei5200 关注: 9269|点评: 26

发表于 2011-5-11 12:36:42 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
对于IE6不支持PNG-24背景透明这个问题可以说是很早就出现了的,,当然网上的各种解决方法也有很多。。
我在下面就讲两种比较常见的办法。如果大家想了解更多的方法可以去搜索一下。。

当然第一种方法是滤镜法:
  1. <html>
  2. <head>
  3. <title>er</title>
  4. <style type="text/css">

  5. html>body #png {background: url(images/logo.png) repeat;}

  6. html #png {
  7. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/logo.png");
  8. background:none;
  9. }
  10. </style>
  11. <SCRIPT type=text/javascript>

  12. function correctPNG()
  13. {
  14. for(var i=0; i<document.images.length; i++)
  15. {
  16. var img = document.images[i]
  17. var imgName = img.src.toUpperCase()
  18. if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  19. {
  20.   var imgID = (img.id) ? "id='" + img.id + "' " : ""
  21.   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  22.   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  23.   var imgStyle = "display:inline-block;" + img.style.cssText
  24.   if (img.align == "left") imgStyle = "float:left;" + imgStyle
  25.   if (img.align == "right") imgStyle = "float:right;" + imgStyle
  26.   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle  
  27.   var strNewHTML = "<span " + imgID + imgClass + imgTitle
  28.   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  29. + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  30.   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
  31.   img.outerHTML = strNewHTML
  32.   i = i-1
  33. }
  34. }
  35. }
  36. window.attachEvent("onload", correctPNG);
  37. </SCRIPT>
  38. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  39. </head>
  40. <body bgcolor="#FFffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  41. <div id="png"> <img src="images/logo.png"></div>
  42. </body>
  43. </html>
复制代码

第二种方法是插件法:
  这个代码是一个老外写的支持png图片的透明,背景定位。全搞定!!!!DD_belatedPNG_0.0.8a-min.js 用法:
  1. <!--[if lte IE 6]>
  2. <script src="DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
  3.     <script type="text/javascript">
  4.         DD_belatedPNG.fix('div, ul, img, li, input , a');
  5.     </script>
  6. <![endif]-->
复制代码
将上边的代码放在<head>……</head>里面(当然其他位置也是可以的)下面是DD_belatedPNG_0.0.8a-min.js 的源文件

游客,如果您要查看本帖隐藏内容请回复

仿购网(www.webfgoo.com)--- 模板仿制购买中心
联系QQ:314250257
我们卖的不是模板是建站服务!!!!

3

主题

339

仿豆

0

收听

版主

Rank: 16Rank: 16Rank: 16Rank: 16

积分
81
发表于 2011-5-12 09:57:01 | 显示全部楼层
学习学习!!

2

主题

12

仿豆

0

收听

P标签

Rank: 1

积分
7
发表于 2011-5-19 11:37:20 | 显示全部楼层
看看看看

0

主题

6

仿豆

0

收听

P标签

Rank: 1

积分
2
发表于 2011-5-25 12:41:07 | 显示全部楼层
找到了!

0

主题

1

仿豆

0

收听

P标签

Rank: 1

积分
2
发表于 2011-5-26 17:24:05 | 显示全部楼层
学习学习!!

0

主题

23

仿豆

0

收听

P标签

Rank: 1

积分
26
发表于 2011-9-14 06:53:24 | 显示全部楼层
爱死你了,这么好的帖子要顶的












                               
登录/注册后可看大图



                               
登录/注册后可看大图

0

主题

19

仿豆

0

收听

P标签

Rank: 1

积分
12
发表于 2011-9-25 15:59:17 | 显示全部楼层
顶你一下,好贴要顶!












                               
登录/注册后可看大图

体检 我也能有私人家庭医生 www.17yike.com

0

主题

8

仿豆

0

收听

P标签

Rank: 1

积分
2
发表于 2011-9-26 17:43:49 | 显示全部楼层
飘过 我是来打酱油的  呵呵~~~












                               
登录/注册后可看大图


                               
登录/注册后可看大图

0

主题

36

仿豆

0

收听

P标签

Rank: 1

积分
15
发表于 2011-10-6 08:09:51 | 显示全部楼层
呵呵,看大家评论如何












                               
登录/注册后可看大图

QVOD

3

主题

11

仿豆

0

收听

P标签

Rank: 1

积分
4
发表于 2011-10-18 23:44:29 | 显示全部楼层
真的牛,双手赞成,谢谢了












                               
登录/注册后可看大图

通販        株        ローン        太陽光発電

使用  (可批量传图、插入视频等)

快速回帖

您需要登录后才可以回帖 登录 | 注册

本版积分规则

清晨第一杯水怎么喝才对

清晨第一杯水怎么喝才对

很多人清晨起床的时候都会有喝水习惯...详情>>