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

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

 

 

版权声明：本文为popstarqq原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。