CSS实现跨浏览器的半透明层

最新推荐文章于 2025-06-05 14:25:19 发布

zenwong

最新推荐文章于 2025-06-05 14:25:19 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发（脚本和动态语言）文章标签： css 浏览器 dreamweaver mozilla filter blend

本文链接：https://blog.youkuaiyun.com/zenwong/article/details/2846546

Web开发（脚本和动态语言）专栏收录该内容

51 篇文章

订阅专栏

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:

div{
filter:alpha(opacity=50); /*IE*/
-moz-opacity:0.5; /*Mozilla*/
opacity: 0.5; /*FF*/
}

就可以了.

-----------------------------------------------------------------------------------------------------

实际应用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS层透明</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<style type="text/css">
/* <![CDATA[ */
body {background:url('http://www.baidu.com/img/logo-yy.gif');}
#box {position:relative; overflow:hidden; z-index:1; width:600px; margin:0 auto; border:1px solid #333;}
#box #opa {position:absolute; z-index:-1; width:100%; height:100%; top:0; left:0; background:#fff; filter:alpha(opacity=60); opacity:0.6;}
* #box #opa {height:10000px; height:10000px;}
/* ]]> */
</style>
</head>
<body>

<div id="box"><br /><br /><br /><br /><br /><center>按时的按时的</center><br /><br /><br /><br /><br /><div id="opa"></div></div>
</body>
</html>