IE6中PNG透明实现的两种方法及非JS纯CSS写法

首页 > 前端代码 > IE6中PNG透明实现的两种方法及非JS纯CSS写法

2010-07-18, 星期日风羽前端代码 js效果, png图标 17 Comments Leave a comment

第一种简单的方法：页面中的PNG图片自动透明

<!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>IE6中PNG透明实现方法</title> <style type="text/css">  </style> <script type="text/javascript"> </script> </head> <body> <img src="http://www.phoyu.com/images/phoyu-logo.png" /> </body> </html>

提示：你可以先修改部分代码再运行。

第二种更强大些的方法，可以实现以下功能：
1 页面中的PNG图片自动透明
2 支持< img alt=”" />元素
3 支持PNG背景图片
4 支持CSS1中的背景平铺(repeat)和定位(12px 24px)
5 背景图片可以定义在页面内的内联样式中也可在外部样式表中
6 支持通过JS改变src或background
7 支持元素动态改变类名(className)

使用方法：按照下面的简单步骤应用到你的页面。
1 复制iepngfix.htc和blank.gif到你的网站文件夹中
2 将下面代码复制到你的HTML或CSS中：

CSS选择器（img、div）是指你要应用PNG图片的元素。

3 如果你的网站使用子文件夹，用记事本打开iepngfix.htc，修改blankImg变量的路径，例如：

IEPNGFix.blankImg=”/images/blank.gif“;

4 如果你要支持CSS1中的background-repeat和background-position属性，需要在head中包含iepngfix_tilebg.js

否则背景图片会显示但不会repeat或position

另外有一种特别的方法
此方法只针对背景，写在CSS里面，且没有JS代码的，这个方法有点变态，不过也不错。
代码是： background/*\**/:url(../images/wellogo.png) no-repeat; 【此是对各支持PNG的浏览器，后面才是针对IE6的】_background:url(../images/blank.gif) no-repeat; -filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src=”images/logo.jpg”);
这里要说明两个注意的东西，一是blank.gif是一张空的透明的图片；二是后面那张JPG图片，实际上不是JPG图片，是复制前面PNG图片改扩展名的变态JPG图片。
另外可能出现的问题，是传到服务器上可能会出现路径不对，这时可写成自己的绝对地址——http://域名/*/logo.jpg。

下载：IE6中PNG透明

文章作者：风羽
本文地址： http://www.phoyu.com/divcss/ie6zhongpngtoumingshixiandeliangzhongfangfa.html
版权所有 © 转载时必须以链接形式注明作者和原始出处！

« 符合网站标准的表格CSS应用语义化的DIV+CSS 命名规范 »