css透明度之 opacity与rgba的区别
前言
最近我在做一个类似于图片九宫格的需求，在使用opacity时遇到了一个小问题，使用了opacity的元素，子元素也会自动添加相应的透明度，并且此时给子元素设置opacity是无效的，！然后就先记录下来。
可能你已经知道这个知识点了，可以顺便瞄一眼，回顾一下 哈哈～
话不多说，我们开始吧
如何使用
1. opacity
取值在0到1之间，0表示完全透明，1表示完全不透明。
.chao{ opacity: 0.5 }
2. rgba
rgba语法:
- R：红色值。正整数 | 百分数
- G：绿色值。正整数 | 百分数
- B：蓝色值。正整数| 百分数
- A：透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
.rgba {
background-color: rgba(0, 0, 0, 0.5)
}
二者区别
首先他们都是可以设置透明度的
1. opacity作用于元素
比如给父元素设置opacity，那么他的子元素，都会加上一样的透明度，在子元素不需要设置透明度的场景下，不能使用该属性
1. rgba可以被设置在多个样式中
设置透明度更加灵活，可以针对元素的某一个属性，添加透明度
.rgba {
backgroun-color: rgba(0,0,0,0.5); //只给背景色🏠透明度
color: rgba(0,0,0,0.5); // 只给文字加上透明度
border-color: rgba(0,0,0,0.5); // 只给元素border加上不透明度
}
TODO：添加demo介绍
昨天加班啦，今早赶下笔记，我有时间了会把demo补上～～
