png24图片在IE6下的透明度问题

女爷i 2022-01-09 16:05 287阅读 0赞

png24图片中IE6下的透明度问题 相信对于每个前端开发人员来说并不陌生！PNG(Portable Network Graphics)是W3C推荐的网页图片通用格式，但是Microsoft的IE6以下(IE7已经支持)没有把PNG的Alpha 通道打开，造成透明PNG图片的效果出不来。在Firefox、Opera下显示正常的透明PNG图片，在IE6下浏览时就会带有灰色背景色！我是经常做页面时候碰到这个问题 及谷歌百度了很多次 想找到更好的方法去解决这个问题！当然最常见的有三个方法可以解决这个问题！下面我依次来谈谈那三个方法及优缺点！！！

一：解决IE6下png24背景 可以用.htc格式的文件可以解决！.htc文件可以到网上下载一个 它貌似是IE6的专有属性。但是当我们做页面 做项目时候不是很方便 因为在本地上可以 但是涉及一个问题要上传文件 至于在淘宝系统下还没有上传过 觉得并不是很好！！

二：第二个方法是用css滤镜解决IE6透明，用IE6的hack技术就可以解决！只需要在相应的类下加如下代码：

1.  \_background：none;\_filter：progid:DXImageTransform.Microsoft.AlphaImageLoader(src="p\_w\_picpaths/leno.png" ,sizingMethod="noscale");/\*IE6透明\*/

当然只对背景有效，对图片无效！src="p\_w\_picpaths/leno.png" 指图片路径！但是用css可以处理IE6 的 PNG24透明问题 但是有个问题要考虑到 当这个图片可点击的或者这个图片上面有点击的元素的话 用css是不行的 因为用这种方法处理IE6下PNG24会屏蔽掉元素点击问题！所以当处理IE6PNG24元素透明问题及涉及到透明图片有元素点击的话 那么要用第三种方法 javascript去解决这个问题 但是如果背景图片没有点击的元素 用这种就足够可以了！

三：用js解决PNG24在IE6下透明度问题：当然也要用IE6下专有的条件注释，这样就不会影响到其他游览器对页面的渲染速度 可能只会对IE6可能会影响点 但是还是很少的！！方法如下：

1.

但是有的时候引用上面的js会失效 可能那个src路径找不到 我们最可靠的方面 就是下载那个js代码过来 当然js中的src失效问题不是绝对的！只说有时候而已！我曾经碰到过这种情况 所以我待会会给个js附件放在那 如果需要的话可以下载下来 在本地上引用那个js就ok了！

下面是我最近看到一个同事用的解决png24的图片在IE6下透明度的最佳方式：

是用css解决的 用滤镜 但是用滤镜是不能点击的 所以巧妙的用了一张一模一样大的gif空白图片 覆盖着上面 目的是为了解决游览器的点击问题！

下面是代码：

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.  <html xmlns="http://www.w3.org/1999/xhtml">
3.  <head>
4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.  <title>无标题文档</title>
6.  <style>
7.  /\* CSS reset \*/
8.  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td\{ margin:0; padding:0; font-size:12px; font-family:"宋体";\}
9.  table\{ border-collapse:collapse; border-spacing:0;\}
10. fieldset,img\{ border:0; display:block;\}
11. address,caption,cite,code,dfn,em,strong,th,var\{ font-style:normal; font-weight:normal;\}
12. ol,ul\{ list-style:none;\}
13. caption,th\{ text-align:left;\}
14. h1,h2,h3,h4,h5,h6\{ font-size:100%; font-weight:normal;\}
15. body\{ background:\#C60; height:2000px;\}
16. .piao\{ width:115px; height:498px; overflow:hidden; position:fixed; right:10px;\*position:absolute;\*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-498)); top:200px;\}
17. html,html body \{background-p\_w\_picpath:url(about:blank);background-p\_w\_upload:fixed;\}
18. .floated\{ background:url(p\_w\_picpaths/float.png) no-repeat; width:115px; height:498px; overflow:hidden;\_background:none;\_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="p\_w\_picpaths/float.png" ,sizingMethod="noscale");/\*IE6透明\*/ \}
19. </style>
20. </head>
21. 
22. <body>
23. <div class="piao">
24. <div class="floated"></div>
25. <img src="p\_w\_picpaths/float.gif" width="115" height="498" border="0" usemap="\#Map" style="position:absolute; top:0; left:0;"/>
26. <map name="Map" id="Map">
27. <area shape="rect" coords="4,129,113,164" href="\#"/>
28. <area shape="rect" coords="3,164,113,197" href="\#"/>
29. <area shape="rect" coords="6,195,111,227" href="\#"/>
30. <area shape="rect" coords="5,228,113,256" href="\#"/>
31. <area shape="rect" coords="4,257,113,284" href="\#"/>
32. <area shape="rect" coords="4,285,111,312" href="\#"/>
33. <area shape="rect" coords="5,310,110,343" href="\#"/>
34. <area shape="rect" coords="5,344,112,375" href="\#"/>
35. </map>
36. </div>
37. </body>
38. </html>

下面提供附件下载

转载于:https://blog.51cto.com/tugenhua/714334