您的位置：首页 > 职场人生

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

2011-11-14 23:01 344 查看

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技术就可以解决！只需要在相应的类下加如下代码：

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

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

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

<!--[if lte IE 6]>
<script type="text/javascript" src="http://xfiles.cdnmyspace.cn/dir/vi/v2/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.test1-t'); //这里写要做透明的class
DD_belatedPNG.fix('.test1-f'); //这里写要做透明的class
</script>
<![endif]-->

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

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

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

下面是代码：

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/* CSS reset */
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:"宋体";}
table{ border-collapse:collapse; border-spacing:0;}
fieldset,img{ border:0; display:block;}
address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; font-weight:normal;}
ol,ul{ list-style:none;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
body{ background:#C60; height:2000px;}
.piao{ width:115px; height:498px; overflow:hidden; position:fixed; right:10px;*position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-498)); top:200px;}
html,html body {background-image:url(about:blank);background-attachment:fixed;}
.floated{ background:url(images/float.png) no-repeat; width:115px; height:498px; overflow:hidden;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/float.png" ,sizingMethod="noscale");/*IE6透明*/ }
</style>
</head>

<body>
<div class="piao">
<div class="floated"></div>
<img  src="images/float.gif" width="115" height="498" border="0" usemap="#Map" style="position:absolute; top:0; left:0;"/>
<map name="Map" id="Map">
<area shape="rect" coords="4,129,113,164" href="#"/>
<area shape="rect" coords="3,164,113,197" href="#"/>
<area shape="rect" coords="6,195,111,227" href="#"/>
<area shape="rect" coords="5,228,113,256" href="#"/>
<area shape="rect" coords="4,257,113,284" href="#"/>
<area shape="rect" coords="4,285,111,312" href="#"/>
<area shape="rect" coords="5,310,110,343" href="#"/>
<area shape="rect" coords="5,344,112,375" href="#"/>
</map>
</div>
</body>
</html>

下面提供附件下载

附件：http://down.51cto.com/data/2359270

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 职场休闲 IE6 透明度 png24图片

相关文章推荐

新的分享

章节导航