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

最新推荐文章于 2024-02-19 12:05:39 发布

荷花微笑

最新推荐文章于 2024-02-19 12:05:39 发布

阅读量3.9k

点赞数

分类专栏： css技巧文章标签： opcity-css

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_35432904/article/details/53708283

版权

css技巧专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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>

结果：
这里写图片描述

荷花微笑

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
改变父元素的透明度，不影响子元素的透明度—css

1、如果我们给父元素添加opacity:0.4后，子元素的red颜色也变成了0.4的透明度，例子如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>透明度写法</title> <style type="text/css"> *{
复制链接

扫一扫