首页 > 网页教程 > CSS > 正文

IE PNG Fix—让IE6完美支持PNG透明图片的插件

2010-07-17 11:46:58 作者：网友来源：互联网

众所周知，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 in your 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图像了。

相关热词：Hack PNG透明 IE6

分享到：

更多...

收藏至我的帐号

教程排行榜: 21个令人惊叹的CSS技术（案例）展示; 看这些用CSS3绘制的图标，你震撼了吗; HTML5的Video标签详细说明手册; 如何使一个DIV层居中于浏览器中？; 加一段代码让IE6支持hover伪类效果; IE PNG Fix—让IE6完美支持PNG透明图片的插件; CSS Sprite(CSS精灵)的优点和使用方法; 最新的IE6、IE7和IE8的CSS BUG汇总列表; 深入理解CSS的inherit与auto之间区别; 用浮动清除LI元素在IE6中底部3像素的BUG; CSS3教程：17种用CSS实现的很酷炫的立体网...; 解决IE6下PNG图片透明的最佳方法; IE的几个最常见BUG及解决方案; DIV+CSS布局两列右列宽度自适应布局的不同...; CSS样式的postion属性absolute和fixed的区别; CSS教程：用相对定位实现简单的图片边框阴...

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...