background-blend-mode

Смешиваем картинки и цвет почти как в Photoshop, но только в CSS.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

Свойство background-blend-mode даёт возможность смешивать разные фоны между собой.

Как пишется

Скопировано
  • normal — значение по умолчанию, фоны не смешиваются, верхний слой остаётся непрозрачным.

Режим контраста

Скопировано
  • overlaybackground-color смешивается с background-image, чтобы отразить светлые или тёмные участки фона.
  • hard-light — если background-image светлее background-color, то результатом будет muliply, а если светлее, то результатом будет screen.
  • soft-light — конечный результат похож на hard-light, но более мягкий, как будто на изображение попал рассеянный прожектор.

Режим затемнения

Скопировано
  • darken — если background-image темнее background-color, то изображение заменяется, в противном случае оно остаётся прежним.
  • multiplybackground-image и background-color перемножаются, и обычно это приводит к получению более тёмного изображения, чем исходное.
  • color-burnbackground-color инвертируется, делится на background-image и снова инвертируется. Похоже на multiply.

Режим осветления

Скопировано
  • lighten — если background-image светлее background-color, то изображение заменяется, в противном случае оно остаётся прежним.
  • screen — и изображение, и цвет инвертируются, умножаются и затем снова инвертируются.
  • color-dodgebackground-color делится на обратную величину background-image. Это очень похоже на screen.

Режим сравнения

Скопировано
  • difference — результат вычитания тёмного цвета backgroound-image и background-color из самого светлого. Часто изображение будет иметь очень высокий контраст.
  • exclusion — результат очень похож на difference, но с меньшим контрастом.

Компонентный режим

Скопировано
  • saturation — сохраняет насыщенность background-image, смешивая при этом оттенок и светимость background-color.
  • color — сохраняет оттенок и насыщенность background-image и светимость background-color.
  • luminosity — светимость верхнего цвета сохраняется, при этом используются насыщенность и оттенок background-color.
  • hue — результатом будет оттенок background-image в сочетании со светлотой и насыщенностью background-color.