пример
Укажите режим смешивания:
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
} Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Свойство фон-смесь-режим определяет режим смешивания каждого фонового слоя (color and/or image) .
| Значение по умолчанию: | normal |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.backgroundBlendMode="screen" |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35,0 | Не поддерживается | 30,0 | 7.1 | 22,0 |
CSS Синтаксис
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| normal | Это по умолчанию. Устанавливает режим смешивания на нормальный | Сыграй " |
| multiply | Устанавливает режим смешивания для умножения | Сыграй " |
| screen | Устанавливает режим смешивания на экран | Сыграй " |
| overlay | Устанавливает режим смешивания для наложения | Сыграй " |
| darken | Устанавливает режим смешивания для затемнения | Сыграй " |
| lighten | Устанавливает режим смешивания, чтобы облегчить | Сыграй " |
| color-dodge | Устанавливает режим смешивания цветовой увернуться | Сыграй " |
| saturation | Устанавливает режим смешивания к насыщению | Сыграй " |
| color | Устанавливает режим смешивания раскрашивать | Сыграй " |
| luminosity | Устанавливает режим смешивания светимостью | Сыграй " |
Похожие страницы
Учебник CSS: CSS фона