【css笔记】 设置背景透明度但不影响内部元素

已被阅读 1562 次 | 文章分类:css | 2022-05-21 00:16

只设置DOM原色的背景或者背景图片的透明度,而不影响内部元素的透明值;

1 一般透明度设置方式

设置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;

/net/upload/image/20220521/79c781cf377648f690966e776a4b2a9b.jpg

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

2 只改变背景透明度

将元素背景相关的设置用伪元素::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;
}
                                            
                                        

/net/upload/image/20220521/39f5d2525aab41d49232d4e2e20787d1.jpg

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号