CSS半透明层的实现非透明文字层和半透明图片层立体效果
CSS半透明层的实现，主要就是灵活运用filter中alpha的效果，使两层之间产生立体效果。
在本示例中，最低层的是一张图片，上边是一个透明度被定义为60%的Div层，层内是文字，因为上面的曾非100%透明，因此可以看到下层的图片，也就是文字层盖住的地方半透明显示下面图片，没用盖住的地方，还是完整显示下面的图片，形成立体效果。
例子代码如下：<!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>
<title> CSS半透明层的实现</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<style>
#container {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 300px;
background: url(images/pic.jpg) no-repeat;
}
#container .textblock {
filter: alpha(opacity=60);
opacity: 0.6;
margin-top: 50px;
margin-left: 50px;
width: 280px;
background: #ffffff;
border: 1px solid #007101;
padding: 0.5em;
font: 80%/1.6 Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="container">
<div>
<p> CSS半透明层的实现，主要就是灵活运用filter中alpha的效果，使两层之间产生立体效果。
</p>
<p>在本示例中，最低层的是一张图片，上边是一个透明度被定义为60%的Div层，层内是文字，因为上面的曾非100%透明，因此可以看到下层的图片，也就是文字层盖住的地方半透明显示下面图片，没用盖住的地方，还是完整显示下面的图片，形成立体效果。
</p>
</div>
</div>
</body>
</html>