Proprietatea mix-blend-mode
Proprietatea mix-blend-mode stabilește
modul de amestecare a culorii sursă peste culoarea
de fundal sau imaginea de fundal.
Valorile pentru proprietate sunt similare modurilor principale
din editorile grafice.
Sintaxă
selector {
mix-blend-mode: valori;
}
În tabel sunt prezentate valorile principale pentru
proprietatea mix-blend-mode:
Valori
| Valoare | Descriere |
|---|---|
normal |
Normal. Nu se utilizează amestecarea culorilor. Modul implicit. |
multiply |
Înmulțire. În acest mod, valoarea culorii de bază este înmulțită cu valoarea culorii suprapuse. Culoarea rezultată este întotdeauna o culoare mai închisă. |
screen |
Luminozitate. În acest mod sunt înmulțite valorile inverse ale culorii de bază și ale culorii suprapuse. Ca rezultat, se aplică întotdeauna o culoare mai deschisă. |
overlay |
Suprapunere. În acest mod, culorile sunt înmulțite sau deschise în funcție de culoarea de bază. Modelele sau culorile acoperă pixelii existenți, păstrând neschimbate părțile luminoase și întunecate ale culorii de bază. |
Exemplu
Să vedem cum va arăta imaginea
cu valoarea implicită a proprietății
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;
}
:
Exemplu
Acum să schimbăm modul de amestecare la înmulțire:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Exemplu
Să setăm proprietății mix-blend-mode
valoarea de suprapunere:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Vedeți și
-
proprietatea
background,
care este o proprietate scurtă pentru fundal -
proprietatea
background-image,
cu care unui bloc i se poate atribui o imagine de fundal -
proprietatea
background-blend-mode,
cu care se poate suprapune imaginea de fundal peste culoarea de fundal