如何用纯CSS实现图片前方元素的局部模糊效果（无背景图）

嘿，这个问题我之前做项目时也踩过坑！你之前用背景色+透明度+filter: blur()的思路其实没找对方向——filter是给元素自己的内容/背景加模糊，而你要的是让遮罩下方的图片区域被模糊，这时候backdrop-filter才是专门干这个的CSS属性！

核心逻辑很简单：backdrop-filter 会直接对元素后方的所有内容（也就是你的图片）应用滤镜效果，完全不需要给遮罩元素设置任何背景图片，纯CSS就能搞定。

具体实现步骤 #

• 先把图片和遮罩层放在同一个定位容器里，给父容器加position: relative，这样能精准控制遮罩的位置。
• 给遮罩层设置position: absolute，指定好你需要的宽高和坐标，让它刚好覆盖在图片的目标区域上。
• 关键一步：给遮罩层加上backdrop-filter: blur(xxpx)，数值越大模糊程度越高；再配合半透明的背景色（比如rgba(255,255,255,0.2)），能让模糊效果更柔和，不会显得太突兀。

完整代码示例 #

<!-- 父容器：用来定位图片和遮罩层 -->
<div class="image-wrapper">
  <img src="your-image.jpg" alt="需要被模糊的图片">
  <!-- 模糊遮罩层 -->
  <div class="blur-mask"></div>
</div>

.image-wrapper {
  position: relative;
  /* 这里设置和图片匹配的宽高 */
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blur-mask {
  /* 定位到你需要的位置 */
  position: absolute;
  top: 60px;
  left: 80px;
  /* 指定遮罩的宽高 */
  width: 220px;
  height: 160px;
  /* 核心：模糊后方的图片内容 */
  backdrop-filter: blur(10px);
  /* 可选：半透明背景增强模糊质感 */
  background-color: rgba(255, 255, 255, 0.18);
  /* 可选：加个边框方便看遮罩范围 */
  border: 1px solid rgba(255,255,255,0.4);
}

为什么之前的方法没效果？ #

你之前用的filter: blur()是处理元素自身的内容，比如你给遮罩层加了背景色，那filter只会模糊这个背景色，而不是下面的图片。加上透明度后，相当于半透明的模糊色块盖在图片上，当然还是能透过色块看到下面的文本。而backdrop-filter是直接处理元素背后的所有内容，完全贴合你的需求。

兼容性小提醒 #

现在Chrome、Firefox、Safari、Edge这些主流浏览器都支持backdrop-filter，如果要兼容IE这种老旧浏览器，可能需要考虑降级方案，但现在大部分业务场景下这个属性已经足够用啦。

内容的提问来源于stack exchange，提问作者Igor-Vuk