为什么 css mix-blend-mode: color;覆盖除白色以外的所有颜色而不是除白色和黑色以外的所有颜色？

Question

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

Answer 1

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>

现在如果我们考虑我们的颜色将永远是黑色或白色。在这种情况下，将使用 black/white 的色调饱和度，并保持背景颜色的亮度。通常我们将白色和黑色的色相和饱和度定义为 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>

为什么 css mix-blend-mode: color;覆盖除白色以外的所有颜色而不是除白色和黑色以外的所有颜色？

Why does css mix-blend-mode: color; cover all colors except white instead of all colors except white and black?

css

mix-blend-mode