如何让CSS滤镜仅作用于父div背景图，不影响子元素？

哈哈，这个坑我踩过好几次！CSS的filter属性确实会作用于整个元素及其所有子元素，直接给父div加滤镜肯定会把内部的文字也一并变暗。要解决这个问题，核心思路就是把背景图和内容拆成两个独立的层级，让滤镜只作用在背景那一层就行。给你几个实用的方案：

方案1：用伪元素承载背景图（最推荐，无需修改HTML结构） #

这是最常用也最优雅的解法，利用伪元素::before或::after来单独放置背景图，然后给伪元素加滤镜，父元素的内容自然就不受影响了。

.kotakartikelhome1 {
  position: relative; /* 让伪元素相对于父元素定位 */
  width: 100%; /* 根据你的需求设置宽高 */
  height: 400px;
}

.kotakartikelhome1::before {
  content: ''; /* 伪元素必须有content属性 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('你的背景图URL');
  background-size: cover; /* 适配父元素尺寸 */
  background-position: center; /* 背景图居中显示 */
  filter: brightness(50%); /* 只给背景图加滤镜 */
  z-index: -1; /* 把背景层放在内容下方 */
}

.sentence {
  position: relative; /* 确保内容层级高于背景 */
  color: white; /* 示例文字颜色，根据需求调整 */
  padding: 20px;
}

原理很简单：伪元素会生成一个和父元素完全重合的层，专门用来放背景图并应用滤镜，而父元素里的.sentence内容会默认在这个伪元素层的上方，完全不受滤镜影响。

方案2：用background-blend-mode混合背景（替代滤镜的思路） #

如果你不想用伪元素，也可以通过给背景图叠加一个半透明黑色层，再用混合模式实现类似降低亮度的效果，这种方式同样不会影响子元素。

.kotakartikelhome1 {
  background-image: url('你的背景图URL'), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  background-blend-mode: darken; /* 让黑色渐变和背景图混合 */
  width: 100%;
  height: 400px;
}

.sentence {
  color: white;
  padding: 20px;
}

这里的rgba(0,0,0,0.5)是半透明黑色，你可以调整最后一个数值（0到1之间）来控制变暗的程度，数值越大越暗。这种方式的效果和brightness(50%)略有不同，但很多场景下可以满足需求。

方案3：拆分背景和内容为独立子元素（适合需要更灵活控制的场景） #

如果你的布局允许修改HTML结构，也可以把背景图单独放在一个子元素里，和内容子元素并列，通过z-index控制层级，滤镜只加在背景子元素上。

HTML结构：

<div class="kotakartikelhome1">
  <div class="background-layer"></div>
  <div class="sentence">这里是你的内容文本</div>
</div>

CSS样式：

.kotakartikelhome1 {
  position: relative;
  width: 100%;
  height: 400px;
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的背景图URL');
  background-size: cover;
  filter: brightness(50%);
  z-index: -1; /* 背景层在内容下方 */
}

.sentence {
  position: relative;
  color: white;
  padding: 20px;
}

这种方式和伪元素的思路本质一样，只是把伪元素换成了真实的DOM元素，适合需要对背景层做更多交互的场景。

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