RGBA 与 opacity不得不说的故事

css中RGBA和opacity有着不同的使用情景和使用方法，但是有时候也有着相同的效果和功效，

相同:都可以改变透明度，

不同点：在MDN上opacity是这样介绍的：

当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。

这句话是什么意思那？
1、opacity在某个元素上时，那个就会作用于某个元素，

2、opacity会左右其子元素的透明度，不论他的子元素的透明度是多少，都会拥有和父元素相同的透明度

例如：

<div style="opacity:0;.....">

<div style="opacity:1;.....">111</div>

</div>

其实即便是里面的元素是不透明的，但是奈何父元素是透明的这样子元素也不会显示；

rgba 在MDN上

颜色可以使用 rgba() 函数符在红-绿-蓝-阿尔法（RGBa）模式下被定义。RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。
a 表示透明度：0=透明；1=不透明；

他俩的最大的区别就是rgba只是对颜色通道进行了操作，并不会操作dom的东西，

举个例子：

当我们需要对一个div的背景进行透明度的设置，用opacity会将div里面的所有的子元素都变成相同的透明度，而raba则只会对背景的颜色做调整，所以，在写透明度的时候，我们要三思后行；