如何用单张图片实现局部平滑渐变暗化效果（CSS/SVG）

CSS方案：backdrop-filter + mask组合 #

这个方案无需额外图片，仅用单张img元素就能实现基于brightness滤镜的自然局部暗化，过渡平滑。

核心逻辑：用伪元素覆盖图片，通过backdrop-filter给下方图片应用亮度暗化滤镜，再用mask设置渐变蒙版，让滤镜效果从指定方向平滑过渡到无。

示例代码：

<div class="image-container">
  <img src="your-image.jpg" alt="目标图片">
</div>

.image-container {
  position: relative;
  display: inline-block;
  max-width: 600px; /* 可选：限制容器宽度 */
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 控制暗化程度：数值越小越暗，1为原图亮度 */
  backdrop-filter: brightness(0.4);
  /* 渐变蒙版：从完全应用滤镜（黑色）到完全不应用（透明） */
  mask: linear-gradient(to right, black, transparent);
  /* 兼容WebKit内核浏览器 */
  -webkit-mask: linear-gradient(to right, black, transparent);
}

• 修改linear-gradient的方向（比如to bottom）可切换暗化过渡的方向；添加渐变断点（如linear-gradient(to right, black 0%, rgba(0,0,0,0.5) 50%, transparent 100%)）可实现更细腻的过渡效果。
• 调整brightness()的数值能精准控制暗化强度。

SVG方案：feComponentTransfer + 渐变蒙版 #

如果需要兼容不支持backdrop-filter的旧浏览器，或是实现更复杂的暗化逻辑，SVG滤镜是更稳妥的选择。

核心逻辑：创建线性渐变作为亮度调整蒙版，通过feComponentTransfer和feBlend将渐变暗化效果与原图混合，实现局部平滑过渡。

示例代码：

<svg width="600" height="400" viewBox="0 0 600 400">
  <defs>
    <!-- 定义渐变：从半透黑到透明，对应暗化过渡 -->
    <linearGradient id="dark-gradient" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#000" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
    </linearGradient>
    <!-- 定义滤镜：混合渐变与原图实现局部暗化 -->
    <filter id="local-darken">
      <feImage href="#dark-gradient" result="grad-layer" width="600" height="400"/>
      <!-- 将渐变转为灰度蒙版 -->
      <feColorMatrix in="grad-layer" type="saturate" values="0" result="gray-mask"/>
      <!-- 用multiply模式混合原图与蒙版，实现自然暗化 -->
      <feBlend in="SourceGraphic" in2="gray-mask" mode="multiply"/>
    </filter>
  </defs>
  <!-- 给图片应用滤镜 -->
  <image href="your-image.jpg" width="600" height="400" filter="url(#local-darken)"/>
</svg>

• 调整渐变的stop-opacity和stop-color可控制暗化程度与过渡范围；修改渐变的x1/y1/x2/y2参数可切换暗化方向。

两种方案均无需使用两张图片，且基于亮度调整的暗化效果比单纯黑色渐变叠加更自然，完全匹配需求。

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