CSS 元素透明

浏览数：22 / 时间：2015年06月09日

　　1、HTML 元素透明

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

1	`opacity:.5`

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

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

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

1	`filter:alpha(opacity=50);`

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

定位来实现。

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

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

2、背景图片透明

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

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

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

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

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

绝对是武力指数最高的。

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

（可能有点拗口）。

咋办？滤镜！

直接上代码：