Свойство background-blend-mode определяет, как фоновое изображение элемента background-image должно сливаться с его цветом фона background-color.
.container {
background-image: url('image.jpg');
background-color: red;
background-blend-mode: screen;
}Свойства
- initial - значение по умолчанию без смешивания;
- inherit - наследует режим наложения родительского элемента;
- <blend-mode> - значение, которое изменит фоновое изображение в зависимости от его цвета фона.
Давайте рассмотрим на примерах виды <blend-mode>, применённые к фоновой картинке с background-color: green.
| background-blend-mode | Демо |
| normal: цвет фона не будет смешиваться с фоновым изображением |
|
| multiply: фоновое изображение и фоновый цвет смешиваются, и обычно это приводит к более темному изображению, чем раньше |
|
| screen: и изображение, и цвет инвертируются, смешиваются, а затем снова инвертируются |
|
| overlay: цвет фона смешивается с фоновым изображением, чтобы отразить светлость или темноту фона |
|
| darken: цвета фонового изображения, которые темнее, чем фоновый цвет, заменяются, в противном случае остаются такими, как были |
|
| lighten: цвета фонового изображение, которые светлее, чем фоновый цвет, заменяются, в противном случае остаются такими, как были |
|
| color-dodge: цвет фона смешивается с инверсией фонового изображения. Похоже на режим screen |
|
| color-burn: цвет фона инвертируется, смешивается с фоновым изображением и снова инвертируется. Похоже на режим multiply |
|
| hard-light: цвета умножаются или осветляются, в зависимости от источника цвета |
|
| soft-light: похож на hard-light, но мягче в том смысле, что он выглядит так, как будто на изображение был помещен рассеянный прожектор |
|
| difference: результат получается путем вычитания более темного цвета фонового изображения и цвета фона из самого светлого цвета. Часто изображение будет очень контрастным |
|
| exclusion: результат очень похож на difference, но с немного меньшей контрастностью |
|
| hue: результатом является оттенок фонового изображения в сочетании с яркостью и насыщенностью фонового цвета |
|
| saturation: сохраняет насыщенность фонового изображения, смешивая оттенок и яркость фонового цвета |
|
| color: сохраняет оттенок и насыщенность фонового изображения и яркость фонового цвета |
|
| luminosity: яркость главного цвета сохраняется при использовании насыщенности и оттенка фонового цвета |
|
Объединение нескольких режимов наложения
Каждый фоновый слой может иметь только один режим наложения, однако, если мы используем, например, несколько линейных градиентов, каждый из них может иметь свой собственный режим наложения. Это достигается путем перечисления этих значений в порядке фоновых слоёв, которые вы хотите изменить:
.container {
background:
linear-gradient(purple 0%, red 90%),
linear-gradient(to right, purple 0%, yellow 90%),
url('image.jpg') 30px,
url('image.jpg') 20px;
background-blend-mode: screen, difference, lighten;
}Первый линейный градиент имеет режим наложения screen, за ним следует второй линейный градиент с режимом наложения difference, и первое фоновое изображение с режимом наложения lighten.
Комментарии (0)