Почему в CSS mix-blend-mode «darken» результат отличается от Photoshop? - PullRequest
Новая
       41

Почему в CSS mix-blend-mode «darken» результат отличается от Photoshop?

0 голосов
/ 18 ноября 2018

Насколько я понимаю, CSS 'mix-blend-mode должен вести себя так же, как и режим смешивания в Photoshop.Однако в следующем простом примере я получаю разные результаты, и я не уверен, почему.

Пример

Голубой прямоугольник (# 00ffff), наполовину перекрывающий красный прямоугольник(# FF0000).Режим смешивания голубого прямоугольника установлен на «затемнение».Поскольку «darken» выбирает самый темный из каждого канала (RGB) для перекрывающихся пикселей, и все три канала равны 0, по крайней мере, в одном из двух прямоугольников, я ожидаю, что область перекрытия будет черной.

Результат в Photoshop

(голубой прямоугольник выделен для ясности)

  • Голубой прямоугольник не виден на черном фоне (ожидается)
  • область перекрытия также черная (ожидается)

enter image description here

Результат в Интернете (Latest Chrome, 70.0.3538.102)

  • Голубой прямоугольник виден на черном фоне (не ожидается)
  • Перекрывающаяся область темная (# 2d0c1b), но не черная (не ожидается)

enter image description here

Пример в реальном времени: CodePen

Итак ... почему результат не совпадает?Чего мне не хватает?

1 Ответ

0 голосов
/ 18 ноября 2018

Результат тот же, но черный фон применяется к body, а не к родительскому элементу элемента, к которому вы применили mix-blend-mode.

Перемещение черного фона там решит проблему: 

body {
  background: black;
}
.group {
 background:#000;
}
.a, .b {
  width: 200px;
  height: 100px;
}

.a {
  background: #00ffff;
}

.b {
  background: #ff0000;
  margin-top: -50px;
  mix-blend-mode: darken;
}
<div class="group">
  <div class="a"></div>
  <div class="b"></div>
</div>

CSS-свойство mix-blend-mode устанавливает, как содержимое элемента должно смешиваться с содержимым родительского элемента ифон элемента. ref

...