Својството 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,
со кое може да се преклопи позадинската слика на позадинската боја