改变父元素的透明度，不影响子元素的透明度—css

最新推荐文章于 2025-03-27 09:38:45 发布

weixin_30371469

最新推荐文章于 2025-03-27 09:38:45 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lst619247/p/8252610.html

本文介绍了解决CSS中父元素透明度影响子元素颜色的问题。通过使用rgba背景色或特定的透明度设置，避免子元素继承父元素的透明度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、如果我们给父元素添加opacity:0.4后，子元素的red颜色也变成了0.4的透明度，
例子如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>透明度写法</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            .wrap{
                margin:200px auto;
                width:200px;
                height:200px;
                background:black;
                opacity:0.4;
                position:relative;
            }
            .inner{
                position:absolute;
                width:100px;
                height:100px;
                background:red;
                top:50%;
                left:50%;
                margin:-50px 0 0 -50px;
            } 

        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
</html>

结果：
这里写图片描述

**解决方法：
父元素的透明度用rgba的方法
background:rgba(0,0,0,0.4);**
解决的后的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>透明度写法</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            .wrap{
                margin:200px auto;
                width:200px;
                height:200px;
                position:relative;
                background:rgba(0,0,0,0.4);
            }
            .inner{
                position:absolute;
                width:100px;
                height:100px;
                background:red;
                top:50%;
                left:50%;
                margin:-50px 0 0 -50px;
            } 

        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
</html>

结果：
这里写图片描述

解决方案2：有兼容性问题；

利用CSS中的opacity属性可以实现一些视觉效果，但是父元素设置透明属性会被子元素继承，这是不想见到的，于是通过一些设置解决这个问题。

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

解决办法是利用CSS3中的rgba（）进行设置，便不会被被子元素继承，同时为了兼容IE7、IE8等浏览器，需要将子元素的positon属性设置为relative，使其脱离流。

position:relative;

转载于:https://www.cnblogs.com/lst619247/p/8252610.html