CSS中能否使用Pin Light混合模式？Photoshop同款效果替代方案咨询

Pin Light混合模式的核心逻辑是分两种情况处理上层颜色：

• 当上层颜色的亮度值（灰度转换后）大于50%时，使用**Color Dodge（颜色减淡）**模式与底层混合
• 当上层颜色的亮度值小于50%时，使用**Color Burn（颜色加深）**模式与底层混合

由于CSS原生mix-blend-mode没有直接提供Pin Light选项，我们可以通过分层模拟这个逻辑，具体实现如下：

实现代码 #

<div class="pin-light-wrap">
  <div class="base-bg"></div>
  <div class="blend-overlay"></div>
</div>

.pin-light-wrap {
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.base-bg, .blend-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.base-bg {
  /* 替换为你的底层图像/颜色 */
  background-image: url('base-image.jpg');
}

.blend-overlay {
  /* 替换为你的上层混合图像/颜色 */
  background-image: url('blend-image.png');
}

/* 用两个伪元素分别处理两种混合逻辑 */
.blend-overlay::before, .blend-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
}

/* 处理上层亮度>50%的区域：应用Color Dodge */
.blend-overlay::before {
  mix-blend-mode: color-dodge;
  /* 仅保留上层亮度高于50%的部分 */
  mask: linear-gradient(white, white), inherit;
  mask-composite: source-in;
  mask-mode: luminance;
}

/* 处理上层亮度<50%的区域：应用Color Burn */
.blend-overlay::after {
  mix-blend-mode: color-burn;
  /* 仅保留上层亮度低于50%的部分 */
  mask: linear-gradient(black, black), inherit;
  mask-composite: source-in;
  mask-mode: luminance;
}

代码说明 #

1. 通过伪元素将上层混合层复制为两个独立的层
2. 第一个伪元素使用color-dodge混合模式，通过mask只显示原上层中亮度超过50%的区域
3. 第二个伪元素使用color-burn混合模式，通过mask只显示原上层中亮度低于50%的区域
4. 两个层叠加后，完全模拟出Pin Light的混合效果

兼容性提示 #

mask属性在Chrome、Firefox、Safari 15+等现代浏览器中都能正常工作。如果需要兼容更旧的浏览器，可以尝试用filter: brightness(0) invert(1)配合mix-blend-mode实现类似蒙版效果，但视觉效果可能有细微差异。

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