如何让文本不受CSS filter滤镜影响？背景变暗时文本需清晰显示

核心问题是filter属性会作用于元素及其所有子元素，直接给容器加滤镜必然会连文本一起变暗。下面是两种简单可行的解决方案：

方法一：使用伪元素承载背景图 #

把背景图放在容器的::before伪元素里，让伪元素作为底层背景，文本在上层独立存在，这样滤镜只作用于伪元素，完全不会影响文本。

代码示例 #

HTML结构：

<div class="blog-container">
  <h2 class="blog-title">文章标题</h2>
  <p class="blog-desc">文章描述内容</p>
</div>

CSS样式：

.blog-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  /* 不要在这里加filter */
}

/* 用伪元素做背景层 */
.blog-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('你的背景图地址') center/cover no-repeat;
  transition: filter 0.3s ease;
  z-index: 0; /* 让背景在文本下方 */
}

.blog-title, .blog-desc {
  position: relative;
  z-index: 1; /* 文本层级高于背景 */
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
}

/* hover时给伪元素加滤镜，同时让文本滑入 */
.blog-container:hover::before {
  filter: brightness(55%) saturation(140%);
}

.blog-container:hover .blog-title,
.blog-container:hover .blog-desc {
  transform: translateY(0);
  opacity: 1;
}

方法二：嵌套div分离背景与文本 #

给容器内部单独加一个承载背景的子元素，文本放在这个子元素外面，通过层级控制让文本不受滤镜影响。

代码示例 #

HTML结构：

<div class="blog-container">
  <div class="blog-bg"></div> <!-- 专门放背景的元素 -->
  <h2 class="blog-title">文章标题</h2>
  <p class="blog-desc">文章描述内容</p>
</div>

CSS样式：

.blog-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.blog-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('你的背景图地址') center/cover no-repeat;
  transition: filter 0.3s ease;
  z-index: 0;
}

.blog-title, .blog-desc {
  position: relative;
  z-index: 1;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
  color: #fff; /* 根据需要设置文本颜色，确保hover时清晰可见 */
}

.blog-container:hover .blog-bg {
  filter: brightness(55%) saturation(140%);
}

.blog-container:hover .blog-title,
.blog-container:hover .blog-desc {
  transform: translateY(0);
  opacity: 1;
}

这两种方法的核心逻辑都是把背景和文本拆分成独立的层级，让滤镜只作用于背景所在的元素，文本处于更高层级，自然不会被滤镜影响，同时还能正常实现滑入动画。

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