css - 为什么 css mix-blend-mode : color; cover all colors except white instead of all colors except white and black?

Question

我想弄清楚为什么 mix-blend-mode: color; css 选择器和值会影响除白色以外的所有颜色，而不是影响除白色和黑色以外的所有颜色。有人可以向我解释为什么会这样吗？

Answer 1

来自 the specification :

color blend mode Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.

因此我们需要考虑 hsl() 颜色，对于白色我们将有 hsl(x, y, 100%) 而对于黑色我们将有 hsl(x, y, 0%)(不管 x,y 的值是多少)。因此，如果您的背景(背景颜色)是白色或黑色，那么结果颜色将是白色或黑色，因为将保持亮度，无论色调和饱和度的值如何，我们将始终为白色或黑色。

img {
  mix-blend-mode:color;
  display:block;
}
div {
  border:1px solid green;
  display:inline-block;
}

<div >
  <img src="https://picsum.photos/id/1/200/150">
</div>
<div style="background:#fff;">
  <img src="https://picsum.photos/id/1/200/150">
</div>
<div style="background:#000;">
  <img src="https://picsum.photos/id/1/200/150">
</div>

现在如果我们考虑我们的颜色将始终是黑色或白色。在这种情况下，将使用黑/白的色调饱和度，我们保持背景颜色的亮度。通常我们将白色和黑色的色调和饱和度定义为 0，所以我们将以 hsl(0,0%,z) 结束，其中 z 将取决于背景图像.这意味着如果我们将黑色或白色视为颜色，我们将得到相同的结果(灰色图像):

div.box {
  border:1px solid green;
  display:inline-block;
  background:url(https://picsum.photos/id/1/200/150);
  width:200px;
  height:150px;
}
div.box > div {
  mix-blend-mode:color;
  height:100%;
}

<div class="box">
  <div></div>
</div>
<div class="box">
  <div style="background:#fff"></div>
</div>
<div class="box">
  <div style="background:#000"></div>
</div>