1. rgba
首先它是一个属性值，语法为rgba（r,g,b,a）
- r为红色值， 正整数 | 百分数
- g为绿色值，正整数 | 百分数
- b为蓝色值，正整数 | 百分数
- a为alpha（透明度），值为0 ~ 1之间的小数， 0.0 （完全透明）到 1.0（完全不透明）
- 上面的正整数为十进制0 ~ 255之间的任意值，百分数为0% ~ 100%之间的任意值
2. opacity
opacity是一个属性，并非是属性值。
使用方法为:opacity:0~1；
俩者之间最大的区别在于：opacity属性的值，可以被其子元素继承。而RGBA后代元素不会继承不透明属性。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>opacity和rgba</title> 6 <style> 7 .opacity{width:100px;height:100px;background: red;opacity: 0.5} 8 .rgba{width:100px;height:100px;background:rgba(255,0,0,0.5);} 9 </style> 10 </head> 11 <body> 12 <div class="opacity"> 13 <p>hello world1</p> 14 </div> 15 <div class="rgba"> 16 <p>hello world2</p> 17 </div> 18 </body> 19 </html>
输出结果：不难看出，rgba的p元素文本内容没有被设置为透明
当我们需要制作透明的边框时 ，就使用ragb颜色，当我们需要背景图片透明时，需要使用alpha属性，当然，背景图片上的内容的透明度也会随之改变。