WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
在线留言 网站地图 加入收藏 设为首页
您的位置:本站首页>>网页设计制作技巧>>解决IE6下PNG背景图片显示的BUG,PNG在IE6显示有阴影

解决IE6下PNG背景图片显示的BUG,PNG在IE6显示有阴影

[ 录入者:91ctc | 时间:2013-03-14 21:58:04 | 作者: 91ctc| 来源:本站 | 浏览: 次 ]


众所周知,IE6下显示PNG背景图片有个严重的问题,那就是:把PNG透明部分显示为一片阴影,这让人很恼火。如图:

IE6下显示PNG图片的BUG

上图对应的源码为:

XML/HTML Code复制内容到剪贴板
  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=gb2312" />  
  5. <title>解决IE6下的PNG显示的BUG</title>  
  6. <style type="text/css">  
  7.   body { font-size:12px;}   
  8.   .content { text-indent:2em; width:500px; height:auto; line-height:20px; color:#333333; background:url(image/yaunchuang.png) no-repeat right top;}   
  9. </style>  
  10. </head>  
  11.   
  12. <body>  
  13. <div class="content">  
  14.   <p>最近一年多的时间,在网上经常看到有人询问“网页设计如何入门”、“如何设计网页”……之类的问题。笔者从接触网页到从事这行业虽然已有六年多,但是要回答这些问题,似乎不能一下子回答上来,因为我越来越感觉到设计网页是一个很困难的工作(也许是下水越久,陷得越深的道理吧),即使这样,笔者还是分享一些心得和经验给大家,愿大家都能在网页设计领域里步步高升。</p>  
  15.   <p>首先,要明确“网页设计”包含哪些工作,需要用到什么知识。说白了,网页设计无非包含两大部分:设计网页,制作网页。所以,只要初学者从这两方面着手即可。</p>  
  16.   <p>其次,明确了工作职责,那么就需要学习如何设计网页,很多网友问我,做网页设计是不是只用Dreamweaver就可以了?我们学校只开了Dreamweaver这门课,我只学Dreamweaver可以不?其实这是一个误区,Dreamweaver只是一个所见即所得、可视化的网页编辑工具,使用它可以让网页制作者快速的制作出自己满意的网页,但是它并不能满足设计的全部需求。我们为了设计出来好的方案,必须要借助其他的设计类软件,设计网页的效果图,我们先设计出方案,然后根据方案制作网页,这样一方面便于自己提前看到效果,另一方面也减少了后期的页面修改过程,从而提高效率,设计类软件,我向大家推荐Photoshop、fireworks这两款软件,矢量图可以用ILL和CD来做(其实网页中使用的矢量图不是很多,除非要做的FLASH效果比较多)所以,平面设计类的软件一定要会。</p>  
  17. </div>  
  18. </body>  
  19. </html>  

上面这个写法在IE7以上版本、火狐、谷歌浏览器中显示是一点问题都没有的。偏偏万恶的IE6让人很讨厌。

对于这个现象,到网上一搜,看来这是个老生常谈的问题,不过,遗憾的是,众多网友写文章,你抄我的,我抄你的,给的一些代码,哥哥我复制下来用,居然没效果,晕,没效果,自己也不测试一下,就在那误导人啊!

于是自己总结一下比较理想的处理方法:

1、第一个方法:代码不用做任何修改,切图的时候,导出png图片时候,注意一下这个地方,如图:

导出PNG-8解决IE6显示PNG的BUG

导出PNG-8格式的PNG图片就可以啦!这样在IE6显示就不会有阴影的问题了。但是,细心的你会发现,PNG-8格式的图片边缘略显得粗糙,没有PNG-24精细。确实是这样,所以当图片很小的时候,又不追求图片精细度的时候,我们直接偷懒一下,弄个PNG-8算了。

2、第二个方法:使用DD_belatedPNG,首先下载一个这个东西:点击下载。下载好,解压到你的站点目录下。

再把以下代码加在你的页面head中。

XML/HTML Code复制内容到剪贴板
  1. <!--[if IE 6]>       
  2. <script src="js/DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>       
  3. <script type="text/javascript">       
  4.     DD_belatedPNG.fix('.content,img');   
  5. </script>  
  6. <![endif]-->  

注意js的路径,DD_belatedPNG.fix('.content,img');   括号内为选择器或标签,多个使用英文逗号隔开。形如这样的:DD_belatedPNG.fix('.content,.logo,.test3');   如果需要做用透明的 PNG 图片做为鼠标经过时的背景图片,那么就是用a:hover当做选择器。例如:DD_belatedPNG.fix('.content,.logo a:hover');   

 这样我们就完美解决了我们的问题,就算不用PNG-8也可以了。给出我的示例:

XML/HTML Code复制内容到剪贴板
  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=gb2312" />  
  5. <title>解决IE6下的PNG显示的BUG</title>  
  6. <style type="text/css">  
  7. <!--   
  8.     body { font-size:12px;}   
  9.     .content { text-indent:2em; width:500px; height:auto; line-height:20px; color:#333333; background:url(images/yaunchuang.png) no-repeat right top;}   
  10. -->  
  11. </style>  
  12. <!--[if IE 6]>       
  13. <script src="js/DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>       
  14. <script type="text/javascript">       
  15.     DD_belatedPNG.fix('.content,img');   
  16. </script>  
  17. <![endif]-->  
  18. </head>  
  19.   
  20. <body>  
  21. <div class="content">  
  22.   <p>最近一年多的时间,在网上经常看到有人询问“网页设计如何入门”、“如何设计网页”……之类的问题。笔者从接触网页到从事这行业虽然已有六年多,但是要回答这些问题,似乎不能一下子回答上来,因为我越来越感觉到设计网页是一个很困难的工作(也许是下水越久,陷得越深的道理吧),即使这样,笔者还是分享一些心得和经验给大家,愿大家都能在网页设计领域里步步高升。</p>  
  23.   <p>首先,要明确“网页设计”包含哪些工作,需要用到什么知识。说白了,网页设计无非包含两大部分:设计网页,制作网页。所以,只要初学者从这两方面着手即可。</p>  
  24.   <p>其次,明确了工作职责,那么就需要学习如何设计网页,很多网友问我,做网页设计是不是只用Dreamweaver就可以了?我们学校只开了Dreamweaver这门课,我只学Dreamweaver可以不?其实这是一个误区,Dreamweaver只是一个所见即所得、可视化的网页编辑工具,使用它可以让网页制作者快速的制作出自己满意的网页,但是它并不能满足设计的全部需求。我们为了设计出来好的方案,必须要借助其他的设计类软件,设计网页的效果图,我们先设计出方案,然后根据方案制作网页,这样一方面便于自己提前看到效果,另一方面也减少了后期的页面修改过程,从而提高效率,设计类软件,我向大家推荐Photoshop、fireworks这两款软件,矢量图可以用ILL和CD来做(其实网页中使用的矢量图不是很多,除非要做的FLASH效果比较多)所以,平面设计类的软件一定要会。</p>  
  25.   <img src="images/yaunchuang.png" width="159" height="130" />  
  26. </div>  
  27. </body>  
  28. </html>  

 截图:

使用DD_belatedPNG解决IE6下PNG图片显示问题

3、第三个方法:看到网上有同僚说可以使用滤镜写法,我也试过,但是滤镜写法在做插入图片的时候有效,但是对背景图片支持的不很好,因为无法定位背景图片的位置。

滤镜写法:

用CSS来实现的好。使用到的就是:
IE5.5+的AlphaImageLoader滤镜
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
      true : 默认值。滤镜激活。
      false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
      image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
      scale : 缩放图片以适应对象的尺寸边界。
      src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

例如:

CSS Code复制内容到剪贴板
  1. .png{background:url(../image/png_test.png);}   
  2. * html .png {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);}   

我反复试了这个写法,在针对背景图片使用时不太好用,读者试试就知道了。

给出我的示例demo:点击下载PNG_BUG_demo.rar


关闭】【返回顶部

相关文章
{xiangguan_list}
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。联系我们
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号