Opacity(透明度)继承问题的解决方案

最新推荐文章于 2024-03-14 15:29:21 发布

Miketutu

最新推荐文章于 2024-03-14 15:29:21 发布

阅读量415

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/Miketutu/article/details/128391920

版权

1. 给父元素设置伪元素::after，则可以完美解决Opacity的继承问题

 <div id="outer">
        <div id="headPority"></div>
        <div id="inner">
            <div id="stuName">李四</div>
            <div id="grade">20.5</div>
            <div id="testOver">考试已结束,感谢作答</div>
            <div id="caculator">
                <div id="caculator_left">
                    <div id="a">20%</div>
                    <div id="b">正确率</div>
                </div>
                <div id="caculator_right">
                    <div id="c">00:45:36</div>
                    <div id="d">答题用时</div>
                </div>
            </div>
            <div id="answer">
                <span>查看解析</span>
            </div>
        </div>
    </div>

CSS代码

#outer {

    width: 620px;
    height: 420px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}

#outer::after {  
    content: '';
    width: 620px;
    height: 420px;
    opacity: 0.2;
    background-color: #ffffff;

}

#headPority {
    width: 83px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid red;
    margin: auto;
    position: absolute;
    top: -33px;
    z-index: 999;
}

#inner {

    width: 600px;
    height: 400px;
    background-color: #ffffff;
    border-radius: 4px;
    position: absolute;
}

注意：在设置伪元素时，记着写content:' '