给父元素设置透明度或者滤镜，子元素都跟着变了

1. 需求

给整个页面设置了背景，但是背景太亮，需要设置一层滤镜

2. 问题

最先想到的代码如下

// html
<div class="content">
  ...内容
  ...内容
  ...
</div>

// css
.content{
  background: url('img path');
  filter: brightness(60%);
}

但是这样会出现一个问题，content下的所有内容也都变暗了，重新设置也是在父元素亮度基础上设置的。

3. 解决

出现该问题的原因是filter、opacity等属性有继承性
可以给content增加一个空块，专门用来设置背景，这样就不会影响到content的子元素了

// html
<div class="content">
  <div class="bg"></div>
  ...内容
  ...内容
  ...
</div>

// css
.content{
  position: relative;
}
.bg{
  background: url('img path');
  filter: brightness(60%);
//下面5行代码作用是让bg铺满整个页面
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}