解决父节点设置透明背景都子节点会继承的问题

最新推荐文章于 2024-04-08 16:21:55 发布

工大动车组

最新推荐文章于 2024-04-08 16:21:55 发布

阅读量310

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/y_0232/article/details/102526399

版权

html css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

解决父节点设置透明背景都子节点会继承的问题

解决方法是再建立一个空div与子节点同级，把它设置为绝对定位，并将width和height都设置为100%，然后在这个div上设置透明度即可。
看一下代码：

<html>
    <body>
        <div id="app">
            <div class="demo"></div>
            <div>
                <p>844545616165</p>
            </div>
        </div>
    </body>
    <style>
        #app {
            width: 100%;
            height: 100%;
        }
        .demo {
            background: url('./壁纸/360wallpaper_dt.jpg');
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
        }
        p {
            opacity: 0.5;
        }
    </style>
</html>

在这里插入图片描述
如有问题欢迎指正，谢谢！

工大动车组

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决父节点设置透明背景都子节点会继承的问题

解决父组件设置透明背景都子组件会继承的问题解决方法是再建立一个空div与子组件同级，把它设置为绝对定位，并将width和height都设置为100%，并在这个div上设置透明度即可。看一下代码：<html> <body> <div id="app"> <div class="demo"></...
复制链接

扫一扫

专栏目录