由于 opacity 属性能被子元素继承，使用它设置父元素背景透明度时也会影响子元素．
解决方法：
1> 使用 RGBA
Example
1 .classname {
2 /* RGBa, 透明度0.6 */
3 background: rgba(0, 0, 0, 0.6);
4 }
2> 使用 opacity, 设置一个背景DIV，此DIV使用绝对布局
Example
1 <div class="demo">
2 <div class="demo-bg"></div><!-- 透明背景 -->
3 <div class="demo-txt">Content here</div><!-- 不透明文字 -->
4 </div>
Demo
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>opacity</title>
6 <style>
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 body{
12 padding: 50px;
13 background: url(http://static.cnblogs.com/images/logo_small.gif) 0 0 repeat;
14 }
15
16 .demo{
17 width: 200px;
18 height: 200px;
19 position: relative;
20 }
21 .demo-bg{
22 position: absolute;
23 left: 0;
24 top: 0;
25 z-index: 0;
26 width: 200px;
27 height: 200px;
28 background-color:#000000;
29 filter:Alpha(opacity=50);
30 background-color: rgba(0,0,0,0.5);
31 }
32 .demo-txt{
33 position: relative;
34 z-index: 1;
35 color: #FFFFFF;
36 }
37 </style>
38 </head>
39 <body>
40
41 <div class="demo">
42 <div class="demo-bg"></div><!-- 透明背景 -->
43 <div class="demo-txt">Content here</div><!-- 不透明文字 -->
44 </div>
45
46 </html>
View Code
3> 建立一个24位PNG背景图片
不推荐，IE下24位PNG图透明时引起的内存泄漏.
SEE ALSO