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>

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

1 个答案: