1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
.opacity{
opacity:0.3filter: alpha(opacity=30)background-color:#000}
2
、要覆盖整个可视区域通常的做法是:
html,body{ height:100%}
.mask{height:100%width:100%}
但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用position:fixed
来解决这个问题
完整的代码:
<div class="mask opacity"></div>
html,body{ height:100%margin:0padding:0}
.mask{height:100%
width:100%position:fixed_position:absolutetop:0z-index:1000}
.opacity{ opacity:0.3filter: alpha(opacity=30)background-color:#000
}
给你一个例子：
<!DOCTYPE html><html>
<head>
<meta
charset="gb2312" />
<title>背景半透明覆盖整个可视区域</title>
<style>
html,body{ height:100% margin:0 padding:0
font-size:14px}
p{ line-height:18px}
.mask{height:100% width:100%
position:fixed _position:absolute top:0 z-index:1000 }
.opacity{
opacity:0.3 filter: alpha(opacity=30) background-color:#000 }
.content{height:600px width:800px overflow:auto border:2px solid #ccc
background-color:#fff position:absolute top:50% left:50% margin:-300px auto
auto -400px z-index:1001 word-wrap: break-word padding:3px}
.ph{
height:1000px}
</style>
</head>
<body>
<p
class="ph">place holder height:1000px</p>
<div class="mask
opacity"></div>
<div class="content">
<h1>背景半透明覆盖整个可视区域</h1>
<p>
这个效果效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道。
</p>
<p>html代码很简单 < d i v class="mask opacity">< / d i
v > </p>
<p> 1 、半透明效果可以使用 css3 中的 opacity
属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
<code>.opacity{ opacity:0.3
filter: alpha(opacity=30) background-color:#000 }</code> </p>
<p> 2 、要覆盖整个可视区域通常的做法是: <br/>
<code> html,body{
height:100%} </code> <br/>
<code>.mask{height:100%width:100%}</code> <br/>
但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用<code>position:fixed
</code>来解决这个问题 </p>
<p>
<strong>完整的代码</strong>:
<pre>
html,body{ height:100%
margin:0 padding:0}
.mask{height:100% width:100% position:fixed
_position:absolute top:0 z-index:1000 }
.opacity{ opacity:0.3 filter:
alpha(opacity=30) background-color:#000 }
</pre>
</p>
<p> <strong>参考资料：</strong>
<a href="http://zhidao.baidu.com">背景半透明最佳实践</a>
<a href="http://baidu.com">垂直居中的几种实现方法</a>
<a href="http://tieba.baidu.com">DIV高度100%</a>
</p>
</div>
</body>
</html>
1、滤镜：Alpha语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
说明：
Opacity：起始值，取值为0～100, 0为透明，100为原图。
FinishOpacity：目标值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、滤镜：blur
语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明：
Add：一般为1，或0。
Direction：角度，0～315度，步长为45度。
Strength：效果增长的数值，一般5即可。
例子：filter:Blur(Add="1",Direction="45",Strength="5")
3、滤镜：Chroma
语法：STYLE="filter:Chroma(Color = color)"
说明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color="#FFFFFF")
4、滤镜：DropShadow
语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
说明：Color:#rrggbb格式，任意。
Offx：X轴偏离值。
Offy：Y轴偏离值。
Positive：1或0。
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、滤镜：FlipH
语法：STYLE="filter:FlipH"
例子：filter:FlipH
6、滤镜：FlipV
语法：STYLE="filter:FlipV"
例子：filter:FlipV
7、滤镜：glow
语法：STYLE="filter:Glow(Color=color, Strength=strength)"
说明：
Color：发光颜色。
Strength：强度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")
8、滤镜：gray
语法：STYLE="filter:Gray"
例子：filter:Gray
9、滤镜：invert
语法：STYLE="filter:Invert"
例子：filter:Invert
10、滤镜：mask
语法：STYLE="filter:Mask(Color=color)"
例子：filter:Mask (Color="#FFFFE0")
11、滤镜：shadow
语法：filter:Shadow(Color=color, Direction=direction)
说明：
Color：#rrggbb格式。
Direction：角度，0－315度，步长为45度。
例子：filter:Shadow (Color="#6699CC", Direction="135")
12、滤镜：wave
语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
说明：
Add：一般为1，或0。
Freq：变形值。
LightStrength：变形百分比。
Phase：角度变形百分比。
Strength：变形强度。
例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、滤镜：Xray
语法：STYLE="filter:Xray"
例子：filter:Xray
1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opacity：对mozilla firefox火狐浏览器实现半透明，win IE不认此属性，-moz-opacity:0.5相当于设置半透明为50%
3、opacity：对除IE外所有浏览器支持包括谷歌，放最后主要针对谷歌浏览器，opacity: 0.5表示设置50%半透明
为了观察到对DIV半透明实现，我们设置两个DIV层，分别一个放于另外一个DIV层内，外层DIV命名为“.div-a”上面被包含的层CSS类命名为“.div-b”，形成“.div-b”盒子放于“.div-a”内
我们对底层DIV设置一个背景是一张图片，上面的DIV盒子设置村黑色。
二、未设置半透明样式实例 - TOP
1、根据描述实例，未设置半透明HTML源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例在线演示 www.divcss5.com</title>
<style>
.div-a{ background:url(div-a-bg.png) no-repeatwidth:230pxheight:136pxpadding:10px}
.div-b{ background:#000width:200pxheight:100pxpadding:5pxcolor:#F00}
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">DIV半透明实例演示</div>
</div>
</body>
</html>
2、未设置半透明CSS样式截图：
未设置半透明时截图
未设置半透明样式 未实现半透明实例浏览器中效果截图
三、对DIV设置CSS半透明样式实例 - TOP
1、我们对“.div-b”选择器加入半透明样式代码：
filter:alpha(Opacity=60)-moz-opacity:0.6opacity: 0.6
设置60%半透明效果
完整实例网页HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例在线演示 www.divcss5.com</title>
<style>
.div-a{ background:url(div-a-bg.png) no-repeatwidth:230pxheight:136pxpadding:10px}
.div-b{ background:#000width:200pxheight:100pxpadding:5pxcolor:#F00
filter:alpha(Opacity=60)-moz-opacity:0.6opacity: 0.6}
/* CSS注释说明：这里对CSS代码换行是为了让代码在此我要中显示完整，换行后CSS效果不受影响 */
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">实现DIV半透明实例演示</div>
</div>
</body>
</html>
2、在浏览器效果截图：
css div半透明实现截图
css+div实现半透明 浏览器中浏览实现DIV半透明效果截图
总结：根据以上两个实例，第一个没有设置半透明样式，另外一个设置半透明样式而实现了div层半透明效果，大家可以根据需要调整半透明值，实现想要半透明度。设置半透明效果要考虑IE浏览器、谷歌、火狐等浏览器兼容支持，所以我们半透明样式代码务必完整。
