如何为多背景图元素中的单个背景图应用CSS filter？

API 探路者

2026-8-18

问题描述

我有一个使用如下CSS代码的元素，效果表现良好，但我希望模糊其中设置为cover的那张背景图。我无法找到仅对单张背景图应用滤镜的方法，我知道可以通过::before或::after伪元素来实现，但更希望能有简洁的单行CSS解决方案。我已做过相关研究但未找到相关信息，如今是否有巧妙的CSS技巧可以实现该需求？

background: url($img) center/contain no-repeat, url($img) center/cover;

我期望能实现类似如下的写法：

background: url($img) center/contain no-repeat, url($img) center/cover blur(20px);

解决方案

目前CSS原生不支持直接给多背景中的单个背景图添加滤镜，你期望的单行写法暂时无法实现。

如果不想用伪元素，可尝试利用backdrop-filter结合嵌套元素，但复杂度并不比伪元素方案低，反而不如伪元素简洁直观。

当前最可靠的实现方案还是用伪元素拆分背景：

给父元素设置position: relative，并添加无需模糊的contain背景图；
用::before伪元素承载cover背景图，设置position: absolute使其占满父元素，再给伪元素添加filter: blur(20px)，同时将伪元素层级设为低于父元素内容（避免覆盖）。

示例代码：

.element {
  position: relative;
  background: url($img) center/contain no-repeat;
  /* 按需添加宽高、overflow等样式 */
}

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url($img) center/cover;
  filter: blur(20px);
  z-index: -1;
}

这种方案虽然不是单行代码，但逻辑清晰、兼容性好，是当前实现该需求的标准做法。