如何在CSS中为图片添加半区域颜色滤镜？

我正在为自家企业开发新网站以替换过时的旧站点，使用的是设计师提供的原型。目前在实现示例图中的图片滤镜效果时遇到了困难，谷歌搜索未能找到可行方案，希望能得到大家的帮助。

你可以通过CSS的filter属性组合多个滤镜参数来实现类似效果，以下是一组接近示例的配置，可根据实际视觉需求微调数值：

.target-image {
  /* 降低饱和度，弱化色彩强度 */
  filter: saturate(0.6)
    /* 提升亮度，模拟褪色质感 */
    brightness(1.1)
    /* 轻微模糊，营造柔焦氛围 */
    blur(0.5px)
    /* 叠加棕褐色调，偏向暖黄效果 */
    sepia(0.2);
}

如果需要更细腻的色调控制，还可以搭配伪元素叠加渐变层：

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 220, 180, 0.18);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

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