如何仅通过CSS（或JS+SVG）模糊HTML img元素的特定区域？

需求：针对一张100px×100px的img标签，模糊其x=25px、y=40px起始，宽20px、高35px的矩形区域，且不能依赖父容器的定位属性，需可靠实现。

现有方案的局限性 #

• 父容器叠加方案：通过重复渲染图片或使用backdrop-filter的方式，必须依赖父元素的定位属性（如position:relative），无法保证在任意环境下生效。
• clip-path方案：只能裁剪掉指定区域的内容，无法对区域内像素应用模糊，会留下空白块，不符合需求。
• SVG mask方案：需要在SVG内部重新渲染图片，页面或图片缩放时容易出现偏移，稳定性差。

可靠实现方案 #

方案1：SVG局部模糊滤镜（推荐）

通过定义SVG滤镜，直接对img应用局部模糊效果，无需额外容器或重复图片，缩放时稳定性高。

<!-- 隐藏的SVG滤镜定义，尺寸不影响页面布局 -->
<svg width="0" height="0" viewBox="0 0 100 100">
  <defs>
    <filter id="local-blur">
      <!-- 1. 创建目标区域的遮罩 -->
      <feFlood flood-color="white" result="white" />
      <feOffset dx="25" dy="40" result="offset-mask" />
      <feComposite 
        in="white" 
        in2="offset-mask" 
        operator="in" 
        width="20" 
        height="35" 
        result="target-mask" 
      />
      
      <!-- 2. 对原图整体应用模糊 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blurred-img" />
      
      <!-- 3. 合成原图（遮罩外区域）与模糊区域（遮罩内区域） -->
      <feComposite in="SourceGraphic" in2="target-mask" operator="out" result="original-part" />
      <feComposite in="blurred-img" in2="target-mask" operator="in" result="blurred-part" />
      <feMerge>
        <feMergeNode in="original-part" />
        <feMergeNode in="blurred-part" />
      </feMerge>
    </filter>
  </defs>
</svg>

<!-- 应用滤镜的img标签 -->
<img 
  src="/path/to/img.png" 
  style="width: 100px; height: 100px; filter: url(#local-blur);" 
/>

优势：

• 无需额外DOM元素，仅依赖一个隐藏的SVG和目标img标签
• 基于SVG viewBox的相对坐标，图片缩放时可通过调整viewbox参数保持模糊区域比例
• 兼容性覆盖主流浏览器，无重复图片加载问题

方案2：纯CSS伪元素实现

利用img的伪元素继承原图背景，定位到目标区域并应用模糊，无需SVG，代码更简洁。

<img 
  src="/path/to/img.png" 
  style="width: 100px; height: 100px; position: relative;" 
/>

img::after {
  content: '';
  /* 定位到目标区域 */
  position: absolute;
  left: 25px;
  top: 40px;
  width: 20px;
  height: 35px;
  /* 继承原图地址，并偏移背景到目标区域位置 */
  background-image: inherit;
  background-position: -25px -40px;
  /* 应用模糊 */
  filter: blur(8px);
  /* 避免遮挡img的交互事件 */
  pointer-events: none;
}

优势：

• 纯CSS实现，无需SVG
• 代码量少，适合固定尺寸的场景
• 不依赖父容器，仅需给img添加position:relative属性

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