父元素的透明度影响子元素之opacity

Posted 2023-02-21 杨晓风-linda

背景

在一次项目需求迭代中，「我的积分模块」要求实现如下UI：

 问题出现在「我的积分」模块的背景色，很显然，根据UI涉及，css样式中包含透明度：

opacity: 0.2;  // 透明度为0.2
background: #FFFFFF;
border-radius: 0px 39px 39px 0px;

此时，子元素不设置opacity，子元素也会有0.2的透明度。导致出现如下效果：

 

问题

设置父元素opacity：0.2，子元素不设置opacity，子元素也会有0.2的透明度。

设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.2的基础上设置的，因此子元素的opacity还是0.2。

解决方案

为父元素设置background: rgba(0,0,0,0.3)。代替opacity

border-radius: 0px 0.17rem 0.17rem 0px;
background: rgba(255,255,255,0.2);