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

Question

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

Answer 1

从规范：

颜色混合模式 使用源颜色的色相和饱和度以及背景颜色的亮度创建颜色。这保留了背景的灰度级，对于为单色图像着色或为彩色图像着色很有用。

所以我们需要考虑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>