如何在CSS中移除文本上的滤镜？设置filter:none未生效

当你给父元素设置filter属性时，这个滤镜会作用于整个父元素及其所有子元素，子元素的filter: none无法抵消父元素的滤镜效果——因为父元素已经把包括子元素在内的整个区域都应用了滤镜，子元素单独设置不会改变这个结果。

把背景图和文字内容分开，用伪元素来承载背景并应用滤镜，这样文字就不会受到滤镜影响。修改后的代码如下：

CSS代码 #

.welcome {
  position: relative;
  /* 确保伪元素相对于这个容器定位 */
}

.welcome::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('code.jpg');
  -webkit-filter: brightness(70%);
  filter: brightness(70%);
  z-index: -1;
  /* 把背景放在文字下方 */
}

.head {
  color: white;
  /* 不需要再设置filter:none */
}

HTML代码 #

<div class="welcome">
  <center>
    <h1 class="head">Relux OS</h1>
    <p class="head">Have the greatest experience.</p>
  </center>
</div>

说明 #

• 给.welcome设置position: relative，让伪元素可以相对于它定位。
• 用::before伪元素创建背景层，设置宽高为100%覆盖容器，应用滤镜后用z-index: -1把它放到文字后面。
• 文字元素不需要额外设置滤镜，直接显示原本的颜色即可。

内容的提问来源于stack exchange，提问作者Monz FIFA