CSS 设置背景透明度，不影响子元素

由于 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>