mix-blend-mode在白色图片上失效的问题及解决方案求助

为什么原代码对白色图片无效 #

mix-blend-mode: hue 的逻辑是拿上层元素的色相，保留下层的饱和度和亮度。但白色的饱和度是0，不管叠什么色相的上层，最终还是白色，自然看不出变化。

三种可行解决办法 #

1. 换用color混合模式 #

把伪元素的混合模式从hue改成color，它会同时替换色相和饱和度，只保留图片的亮度，刚好适配白色（高亮度）图片：

.product {
  position: relative; /* 必须加，不然伪元素定位会乱跑 */
}
.product::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: hsl(30, 50%, 75%);
  mix-blend-mode: color; /* 替换原来的hue */
}

2. 给图片加个高饱和度底层（适配hue模式） #

如果非要用hue模式，可以在图片下面垫一个有饱和度的底色，让hue模式能发挥作用：
先改HTML结构：

<div class="product">
  <div class="product-underlay"></div>
  <img src="https://i.sstatic.net/rQSiP.png" alt="Product">
</div>

再加CSS：

.product {
  position: relative;
  display: inline-block;
}
.product-underlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(0, 100%, 50%); /* 随便选个高饱和度颜色就行 */
  z-index: -1;
}

这样白色图片会和底层颜色混合，上层伪元素的hue模式就能修改色相了。

3. 用CSS filter直接调色相 #

放弃混合模式，用filter: hue-rotate()动态调整图片颜色，这种方法对黑白图片都有效：
删掉原代码里.product::after的所有样式，添加以下CSS：

#color-1:checked ~ .product img {
  filter: hue-rotate(0deg);
}
#color-2:checked ~ .product img {
  filter: hue-rotate(90deg); /* 对应原hsl(120)，和初始色相差90度 */
}
#color-3:checked ~ .product img {
  filter: hue-rotate(180deg); /* 对应hsl(210)，差180度 */
}
#color-4:checked ~ .product img {
  filter: hue-rotate(270deg); /* 对应hsl(300)，差270度 */
}

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