使用DIV+CSS实现层与背景半透明效果。
说明：
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盒子设置村黑色。
一.未设置半透明样式实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<meta charset="utf-8" />
<title>css背景半透明www.ldsun.com</title>
<style>
.div-a {
background: url(div-a-bg.png) no-repeat;
width: 230px;
height: 136px;
padding: 10px;
}
.div-b {
background: #000;
width: 200px;
height: 100px;
padding: 5px;
color: #F00
}
</style>
<div class="div-a">
<div class="div-b">DIV半透明实例演示</div>
</div>
|
二.对DIV设置CSS半透明样式实例
对.div-b选择器加入半透明样式代码：
1
2
| filter:alpha(Opacity=60);
-moz-opacity:0.6;opacity: 0.6;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<meta charset="utf-8" />
<title>css背景半透明www.ldsun.com</title>
<style>
.div-a {
background: url(div-a-bg.png) no-repeat;
width: 230px;
height: 136px;
padding: 10px
}
.div-b {
background: #000;
width: 200px;
height: 100px;
padding: 5px;
color: #F00;
filter: alpha(Opacity=60);
-moz-opacity: 0.6;
opacity: 0.6
}
</style>
<div class="div-a">
<div class="div-b">实现DIV半透明实例演示</div>
</div>
|
