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

时间:2019-05-14 00:44:17

标签: css css3 mix-blend-mode

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

1 个答案:

答案 0 :(得分:0)

来自the specification

  

颜色混合模式   创建具有源颜色色相和饱和度背景色发光度的颜色。这样可以保留背景的灰度等级,对于为单色图像着色或为彩色图像着色很有用。

因此,我们需要考虑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>