覃健祥 | chin at blogchina

CSS的半透明层实现

                                      

Dreamweaver的CSS设计器有个"扩展"选项,可以定义滤镜,用filter: Alpha(Opacity=50);即可实现半透明效果.

遗憾的是,即便是像Dreamweaver这样支持Web标准最好的网页设计工具也会产生IE Only的代码.上面那个滤镜就是一个例子,在IE下正常,Firefox下面就不能工作,因为,这个是IE自己定义的,不是W3C CSS的标准.

看看W3C怎么说的:

http://www.w3.org/TR/css3-color/#opacity

3.2. Transparency: the 'opacity' property

Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element (including its children) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

Name:	opacity
Value:	<alphavalue> | inherit
Initial:	1
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	The same as the specified value after clipping the <alphavalue> to the range [0.0,1.0].

那么,如何让Mozilla系的浏览器和IE都能实现半透明呢?这里有篇好文章:http://www.domedia.org/oveklykken/css-transparency.php,这样写你的CSS:

#transbox {
 filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}

就可以了.

【作者: 覃健祥】【访问统计:】【2005年08月1日 星期一 14:46】【 加入博采】【打印】