众所周知,ie6的占有率和它的众多bug总是让设计师们头痛不已,其中一点就是对png-24的支持非常糟糕。过去的解决方案也总是不尽完美,不过现在ie png fix出现了,一举解决了这个讨厌的问题,现在我们可以尽情在web设计中使用png-24图像了:)。
//IE PNG Fix 2.0 Alpha 4
//This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you
//can have full translucency and no more ugly grey borders! Full CSS background
// positioning and repeat are supporting (including CSS sprites). It requires only one line
// inyour CSS file, and no changes to your website HTML. <IMG> tags and background
// images are both supported.
使用方法:
在
http://www.twinhelix.com/css/iepngfix/下载IE PNG Fix (16)(当前版本是2.0 Alpha 4);
这是个示例的页面,实际运用中我们只需要用的其中的“iepngfix_tilebg.js”、“blank.gif”和 “iepngfix.htc”。
这里以此站(drupal)为例,按照我自己的习惯,我把他们放在“\sites\all\themes\自定主题文件夹\js”目录下。
在tpl.php里调用那个js文件,如下:
<script src="/sites/all /themes/自定主题文件夹/js/iepngfix_tilebg.js" type="text/javascript"></script>
在主题的css里加入下面一段:
/*==ie6 png fix==*/
img, div, a, span, h1, h2, h3, h4, h5, h6, p { behavior: url(/sites/all/themes/自定主题文件夹/js/iepngfix.htc) }
其中的html标签是你可能会用到png-24来做背景图的内容,可以根据你的实际情况自行决定包含哪些标签。而目前我也并不知道多写些可能用不 上的标签是否对性能带来影响。
大功告成,现在你可以在css里的background-image(background)属性或直接在html的img标签中使用png- 24图像了。