css设置背景透明度，而不影响内部元素

最新推荐文章于 2024-07-10 11:11:44 发布

杨大大28

最新推荐文章于 2024-07-10 11:11:44 发布

阅读量3.8k

点赞数 3

分类专栏：前端 css 文章标签： css html

本文链接：https://blog.csdn.net/popstarqq/article/details/124762080

版权

前端同时被 2 个专栏收录

94 篇文章 16 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

设置DOM元素背景透明度，常用opacity属性，如下效果

<html>
    <head>
        <style>
          .image{
              width: 600px;
              height: 400px;
              position: relative;
              background:url('./img_lights.jpg'); 
              opacity: 0.5;
              text-align: center;
          }
        </style>
    </head>
    <body>
      <div class="image">
          <h1>极光</h1>
      </div>
    </body>
</html>

结果会让整个DOM元素内部所有元素透明度变为0.5;

如何只背景或者背景图片得透明度，不让DOM元素内容受影响呢

将元素背景相关的设置用伪元素::after去定义，然后设置伪元素的透明度即可

如下设置：

.image{
    width: 600px;
    height: 400px;
    position: relative;
    text-align: center;
}
.image::after{
    content: "";
    background:url('./img_lights.jpg'); 
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

杨大大28

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
css设置背景透明度，而不影响内部元素

设置DOM元素背景透明度，常用opacity属性，如下效果<html> <head> <style> .image{ width: 600px; height: 400px; position: relative; background:url('./img_lights.jpg');
复制链接

扫一扫