1.rgba也经常在实际应用中使用,它主要是在原来rgb的基础上添加了一透明度。但是他又和opacity又有一些差别,主要体现在对子元素的透明度的影响上。

  例如:使用opacity和background属性设置元素的背景色和透明度,其子元素的透明度跟着父元素一起变化。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>css3</title>
 5 </head>
 6 <style type="text/css">
 7     .example{
 8         width:100%;
 9         height:500px;
10         background: yellow;
11         opacity: 0.1;
12         color:red;
13         font-size: 50px;
14     }
15     .example2{
16         background: blue;
17         width: 200px;
18         height:300px;
19     }
20     .example3{
21         background: blue;
22     }
23 </style>
24 <body>
25 <div class="example">
26     <div class="example2">
27         111
28     </div>
29 </div>
30 <div class="example3">
31     background
32 </div>
33 </body>
34 </html>

但是rgba()对子元素的透明度没有影响

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>css3</title>
 5 </head>
 6 <style type="text/css">
 7     .example{
 8         width:100%;
 9         height:500px;
10         background: rgba(0,0,0,.1);
11         color:red;
12         font-size: 50px;
13     }
14     .example2{
15         background: yellow;
16         width: 200px;
17         height:300px;
18     }
19 
20 </style>
21 <body>
22 <div class="example">
23     <div class="example2">
24         111
25     </div>
26 </div>
27 
28 </body>
29 </html>

参考:http://www.w3cplus.com/content/css3-rgba

posted on 2016-08-24 14:22  北冥鱼鱼鱼  阅读(225)  评论(0编辑  收藏  举报