在项目开发中遇到一个问题，当为父级元素设置opacity透明度时，子元素样式受到影响。通过研究发现，子级继承了父级的opacity属性。解决方案是使用rgba颜色值而非opacity，因为rgba的透明度不会被子级继承。将颜色转换为rgba格式，设置子元素的alpha值为1，成功解决了问题。总结来说，rgba提供了更好的独立性，而opacity会影响所有后代元素。
解决父元素的透明度影响子元素的问题
最近在项目中遇到了一个关于透明度的问题，给父级设置透明度，使用（opacity),子级的正常样式会受到影响。
问题的解决
- 通过审查元素可以发现，子级继承了父级的opacity样式，从而影响了该有的样式；
- 给子级设置opacity为1，依然没有效果；
- 通过搜索引擎我们可以知道，opacity的样式会被子级继承，但rgba不会；
- 通过网上的工具就可以快速把十六进制的颜色样式转成rgb的样式,a的值和opacity的值保持一致；
由此，问题得到了解决。
总结rgba和opacity区别
rgba：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
opacity:
取值为从 0.0 （完全透明）到 1.0（完全不透明）
opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性
扫一扫
8841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
