子元素继承父元素透明度问题。

Posted 2020-09-17

在写CSS的发现，将父元素的opacity设置为0.5之后，子元素一定会继承这个属性，且对子元素单独设置opacity，也无效。

 1             #texts{
 2                 height: 30px;
 3                 width:380px;
 4                 background: #000000;
 5                 position: absolute;
 6                 top: 270px;
 7                 color: #FFFFFF;
 8                 z-index: 997;
 9                 font-size: 12px;
10                 opacity: 0.5;
11             }
12              .textRight,.textLeft{
13                 width: 186px;
14                 padding: 0 2px;
15                 line-height: 30px;
16                 opacity: 1;
17             }
18             #texts .textRight{
19                 text-indent: 70px;
20                 float: right;
21             }
22             .textLeft{
23                 text-indent: 10px;
24                 float: left;
25             }

.textRight,.textLeft 的opacity属性完全无效。
后续发现另外一种写法是有效的，将背景色转换为RGG值， background:rgb(0,0,0,0.5),最后一位表示透明度，然后再子元素设置opacity，发现有效（不考虑兼容性）；代码如下

#texts{
                height: 30px;
                width:380px;
                background: rgb(0,0,0,0.5);
                position: absolute;
                top: 270px;
                color: #FFFFFF;
                z-index: 997;
                font-size: 12px;
            }
             .textRight,.textLeft{
                width: 186px;
                padding: 0 2px;
                line-height: 30px;
                opacity: 1;
            }
            #texts .textRight{
                text-indent: 70px;
                float: right;
            }
            .textLeft{
                text-indent: 10px;
                float: left;
            }