Savybė mix-blend-mode
Savybė mix-blend-mode nustato
pirminės spalvos maišymo su fono spalva
arba fono paveikslėliu režimą.
Savybės reikšmės yra analogiškos pagrindiniams
grafinės informacijos redagavimo programų režimams.
Sintaksė
selektorius {
mix-blend-mode: reikšmės;
}
Lentelėje pateikiamos pagrindinės savybės
mix-blend-mode reikšmės:
Reikšmės
| Reikšmė | Aprašas |
|---|---|
normal |
Normalus. Spalvų maišymas nenaudojamas. Numatytoji režimo reikšmė. |
multiply |
Dauginimas. Šiame režime pirminės spalvos reikšmė dauginama susijungusios spalvos reikšmė. Galutinė spalva visada yra tamsesnė spalva. |
screen |
Šviesinimas. Šiame režime dauginamos atvirkštinės pirminės ir susijungusios spalvos reikšmės. Kaip galutinė spalva visada taikoma šviesesnė spalva. |
overlay |
Uždengimas. Šiame režime spalvos dauginamos arba šviesinamos priklausomai nuo pirminės spalvos. Raštai ar spalvos uždedami ant esamų pikselių, paliekant šviesias ir tamsias pirminės spalvos sritis nepakitusias. |
Pavyzdys
Pažiūrėkime, kaip atrodys paveikslėlis
su numatytąja savybės
mix-blend-mode reikšme:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: normal;
width: 400px;
height: 300px;
}
:
Pavyzdys
Dabar pakeiskime maišymo režimą į dauginimą:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Pavyzdys
Nustatykime savybei mix-blend-mode
uždengimo reikšmę:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Taip pat žiūrėkite
-
savybė
background,
kuri yra sutrumpinta fono savybė -
savybė
background-image,
kuria galima nustatyti fono paveikslėlį blokui -
savybė
background-blend-mode,
kuria galima uždeti fono paveikslėlį ant fono spalvos