解决父元素的透明度影响子元素的问题

解决父元素的透明度影响子元素的问题

最近在项目中遇到了一个关于透明度的问题，给父级设置透明度，使用（opacity),子级的正常样式会受到影响。

问题的解决

1. 通过审查元素可以发现，子级继承了父级的opacity样式，从而影响了该有的样式；
2. 给子级设置opacity为1，依然没有效果；
3. 通过搜索引擎我们可以知道，opacity的样式会被子级继承，但rgba不会；
4. 通过网上的工具就可以快速把十六进制的颜色样式转成rgb的样式,a的值和opacity的值保持一致；

由此，问题得到了解决。

总结rgba和opacity区别

rgba：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
opacity:
取值为从 0.0 （完全透明）到 1.0（完全不透明）

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性