解决子元素继承父元素透明度问题_js让子节点透明度比父节点深-优快云博客

本文链接：https://blog.youkuaiyun.com/amaoagou_0124/article/details/80658247

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            html,body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            .father{
                opacity: 0.83;
                background: #20304F;
                padding: 1%;
                height: 60%;
                width: 50%;
            }
            .child1{
                height: 90%;
                width: 90%;
                background: #15213F;
            }
        </style>
    </head>

    <body> 
        <div class="father">
            <div class="child1"></div>
        </div>
    </body>
</html>

运行结果

父盒子添加opacity属性
父盒子不添加opacity属性

通过两张图的对比，明显可以看出在父盒子添加opacity属性后，子元素的透明度是被改变了的，即使我们将子盒子的透明度设为1，也是基于透明度0.83而言的。那我们要怎么改呢？
我们可以使用RGB或HSL方式定义父元素背景颜色，这两种方式与十六进制颜色值最大的区别在于它们支持透明通道，可以使元素某些部分有透明效果，不会影响该元素内包含的所有内容。更改如下：

.father{
    background: rgba(32,48,79,.83);/*区别*/
    padding: 1%;
    height: 60%;
    width: 50%;
}

运行结果

明显看出，子盒子正常显示，其余部分增加了透明度。这样就解决了opacity属性实现透明度会导致元素内所有内容都透明的问题。