Свойство mix-blend-mode
Свойството mix-blend-mode задава
режим на смесване на изходния цвят с фонов
цвят или фоново изображение.
Стойностите за свойството са аналогични на основните режими
на графичните редактори.
Синтаксис
селектор {
mix-blend-mode: стойности;
}
В таблицата са представени основните стойности за
свойството mix-blend-mode:
Стойности
| Стойност | Описание |
|---|---|
normal |
Нормален. Не се използва смесване на цветове. Режим по подразбиране. |
multiply |
Умножение. В този режим стойността на основния цвят се умножава по стойността на смесвания цвят. Резултантният цвят винаги представлява по-тъмен цвят. |
screen |
Изсветляване. В този режим се умножават обратните стойности на основния и смесвания цвят. Като резултатен цвят винаги се прилага по-светъл цвят. |
overlay |
Препокриване. В този режим цветовете се умножават или изсветляват в зависимост от основния цвят. Шарки или цветове препокриват съществуващите пиксели, оставяйки неизменени светлите и тъмните участъци на основния цвят. |
Пример
Нека да видим как ще изглежда изображението
със стойността по подразбиране на свойството
mix-blend-mode:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: normal;
width: 400px;
height: 300px;
}
:
Пример
А сега нека да променим режима на смесване на умножение:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Пример
Нека зададем на свойството mix-blend-mode
стойност препокриване:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Вижте също
-
свойството
background,
което представлява свойство-съкращение за фон -
свойството
background-image,
с което на блок може да се зададе фонова картинка -
свойството
background-blend-mode,
с което може да се наложи фоново изображение върху фонов цвят