Почему 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>