CSS 元素透明

　　1、HTML 元素透明

　　其实本身，CSS 实现元素透明是件容易事儿。直接上代码：

opacity 指的是不 透明 度， 取值为 0~1 之间，1 表示完全不透明，0 表示完全透明 。

A 级 浏览器 基本都支持 opacity  属性 ，但碰上 IE，总没好事。不过 IE 有滤镜，可以帮

助我们拐弯抹角地搞定不 透明 度：

注： 事实上会碰到 透明 背景层，而 opacity 属性是会继承的，避免这个问题，需要结合

定位来实现。

在  CSS3  中，还可以使用 HSLA（色调、饱和、亮度、 透明 度）或者 RGBA（红、

绿、蓝、 透明 度）来实现元素 透明 。例如：

2、背景图片透明

有一个值得关注的问题是，PNG8 格式的图片在 IE6 下仅支持全 透明 ，也就是说，IE6 

下使用 PNG8 无法实现背景的半 透明 效果 。透不 透明 其实有时候无所谓，但问题是全透

明状态下，会导致图片出现恶心的毛边。虽然可以在导出 PNG8 时，通过 选择 杂边颜色

或者去除杂边的方式 解决 ，但并不完美。

可喜的是，PNG24 支持全 透明 ，所以 PNG24 就很威猛了，在图片 透明 的方案中，它

绝对是武力指数最高的。

但碰上 IE，另一个恶心的问题又出现了，IE6 不支持支持半 透明 的 PNG24  透明 图片

（可能有点拗口）。

咋办？滤镜！

直接上代码：

但碰上 IE6，又悲剧了。在 CSS 文档和 页面 地址不一致时（比如很多 网站 会将静态资

源放置于和站点本身不同域的 CDN  服务器 上），会导致滤镜引用的图片不可获取。所

以一旦资源跨域，必须保证图片地址为绝对路径。

原文：http://www.cnblogs.com/xupeiyu/p/3640853.html