本文和大家分享的主要是css中与透明度有关的两个属性opacity和rgba，主要围绕这两个css属性的区别和注意事项来说，希望对大家学习css有所帮助。
语法
1. rgba
首先它是一个属性值，语法为rgba（r,g,b,a）
- r为红色值， 正整数 | 百分数
- g为绿色值，正整数 | 百分数
- b为蓝色值，正整数 | 百分数
- a为alpha（透明度），值为0 ~ 1之间的小数， 0.0 （完全透明）到 1.0（完全不透明）
- 上面的正整数为十进制0 ~ 255之间的任意值，百分数为0% ~ 100%之间的任意值
// 例子：.box1{
// 不限于背景颜色，可以是文字颜色，阴影等
background: rgba(0,0,255,0.4);
}
2. opacity
opacity是一个属性，而非一个属性值，语法为 ：
opacity: value|inherit;
value:不透明度，从 0.0 （完全透明）到 1.0（完全不透明）
//例子.box2{
background: rgb(0,0,255);
opacity:0.4;
}
不同之处
· 有opacity属性的所有后代元素都会继承 opacity 属性，而RGBA后代元素不会继承不透明属性
· 看看下面效果:
//部分代码.box1{
background: rgba(0,0,255,0.4);
}.box2{
background: rgb(0,0,255);
opacity:0.4;
}
我们从效果图中不难看出，
- rgba只是背景颜色有透明效果
- 而有opacity属性元素的后代都会继承这个透明属性，包括但不限于文字图片等
来源：网络
CSS中opacity和rgba的区别是什么？