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