如何用CSS filter实现图片向白色渐变的洗出效果？

要实现你要的「叠加半透明白色洗出」效果，且仅用CSS filter属性、支持通过自定义属性--fade动画过渡，可以用以下代码：

.target-image {
  --fade: 0.5; /* 取值范围0-1，0为原图，1为全白，可调整或添加动画 */
  filter: brightness(calc(1 / (1 - var(--fade)))) saturate(calc(1 - var(--fade)));
  /* 可选：添加平滑过渡动画 */
  transition: filter 0.3s ease;
}

原理说明 #

你要的叠加白色效果，数学上对应每个RGB通道值满足：
最终通道值 = 原像素值 × (1 - fade) + 255 × fade

单独用brightness()无法实现，因为它只是对像素值做乘法运算，暗部像素即便乘大因子也无法接近白色。而brightness()+saturate()的组合刚好能模拟这个混合逻辑：

1. brightness(calc(1/(1 - var(--fade))))：提亮亮部的同时，让暗部像素尽可能向白色靠拢；
2. saturate(calc(1 - var(--fade)))：降低颜色饱和度，让所有色彩向灰度（最终趋近白色）过渡；
   两者结合后，完全匹配你需要的「叠加半透明白色」视觉效果，且支持CSS动画（自定义属性--fade可平滑过渡）。

效果匹配 #

• 当--fade: 0.5时，效果与你提供的「叠加50%不透明度白色」图一致；
• 当--fade: 0.9时，效果与「叠加90%不透明度白色」图一致；
• 彻底避免了brightness()滤镜仅提亮、暗部仍偏暗的问题。

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