Свойство background-blend-mode

Свойство background-blend-mode — режим смешивания фоновых слоёв — алгоритм, определяющий механизм взаимодействия пикселей каждого слоя. Фон одного элемента может иметь несколько слоёв.

Количество слоёв определяется количеством значений, разделенных запятыми в свойстве background-image. Если для элемента задано несколько фоновых слоёв, первый фон из списка будет применяться к верхнему слою.

div {
  width: 300px;
  height: 400px;
  background-image: linear-gradient(45deg, #f8a261, #6e9fc9),  url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg); /* в данном примере мы увидим только градиентную заливку */
}

Свойство background-blend-mode делает верхний (активный) слой полупрозрачным, что позволяет показывать сквозь него нижележащие слои. Обязательное условие — фоновых слоёв должно быть минимум два:

div {
  width: 300px;
  height: 400px;
  background-image: linear-gradient(45deg, #f8a261, #6e9fc9), url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg);
  background-blend-mode: overlay;
}

Если первым слоем будет идти изображение, то конечный результат для одного режима смешивания будет отличаться.

div {
  width: 300px;
  height: 400px;
  background-image: url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg), linear-gradient(45deg, #f8a261, #6e9fc9);
  background-blend-mode: overlay;
}

Если для одного элемента задано больше двух фоновых слоёв, то для него можно задать несколько режимов смешивания, перечислив их через запятую.

div {
  width: 300px;
  height: 400px;
  background-image: linear-gradient(45deg, #f8a261, #6e9fc9), linear-gradient(135deg, #08526b, #fbcd7c), url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg);
  background-blend-mode: overlay, color;
}

Свойство background-blend-mode может применяться к любому html-элементу, не анимируется и не наследуется.

Поддержка браузерами

IE: не поддерживает
Edge: не поддерживает
Firefox: 30.0
Chrome: 35.0
Safari: 7.1 частичная поддержка
Opera: 22.0
iOS Safari: 8.0 частичная поддержка
Opera Mini: не поддерживает
Android Browser: 53.0
Chrome for Android: 54.0

1. Виды режимов смешивания

Для каждого режима используются математические расчёты, которые вычисляются в диапазоне от 0 до 1, где 0 соответствует чёрному цвету, 1 — белому. Все режимы смешивания можно разделить на следующие группы:

• Нормальный режим — normal;
• Режим контраста — overlay, soft-light, hard-light;
• Режим затемнения — darken, multiply, color-burn;
• Режим осветления — lighten, screen, color-dodge;
• Режим сравнения — difference, exclusion;
• Компонентный режим — hue, saturation, color, luminosity.

Примеры использования режимов смешивания

1. Эффект холста

div {
  width: 550px;
  height: 550px;
  background-image: url(https://html5book.ru/wp-content/uploads/2016/12/romantika.jpg), 
  url(https://html5book.ru/wp-content/uploads/2015/12/background63.jpg);
  background-blend-mode: color-burn;
}

2. Ретро-эффект

div {
  width: 550px;
  height: 550px;
  background-image: url(https://html5book.ru/wp-content/uploads/2016/12/romantika.jpg), radial-gradient(rgba(255,255,255,.3) 20px, transparent 20px);
  background-size: 100% 100%, 60px 60px;
  background-position:0 0, 5px 5px;
  background-blend-mode: hard-light;  
}

3. Сетчатый эффект

div {
  width: 550px;
  height: 550px;
  background-image: url(https://html5book.ru/wp-content/uploads/2016/12/romantika.jpg), radial-gradient(black 1px, transparent 1px);
  background-size: 100% 100%, 4px 4px;
  background-blend-mode: darken;  
}

4. Градиентный узор

html, body {height:100%}
body {
  margin: 0;
  background:
  repeating-linear-gradient(60deg,
  #E7F0ED 0em, #E7F0ED 1em,
  #D8BBB5 1em, #D8BBB5 2em,
  #D1AFA6 2em, #D1AFA6 3em,
  #F1B6A8 3em, #F1B6A8 4em,
  #FFEFD7 4em, #FFEFD7 5em),
  repeating-linear-gradient(-60deg,
  #E7F0ED 0em, #E7F0ED 1em,
  #D8BBB5 1em, #D8BBB5 2em,
  #D1AFA6 2em, #D1AFA6 3em,
  #F1B6A8 3em, #F1B6A8 4em,
  #FFEFD7 4em, #FFEFD7 5em);
  background-blend-mode: multiply;
}