Īpašība background-blend-mode
Īpašība background-blend-mode nosaka
fona attēla sajaukšanas režīmu ar
fona krāsu vai citiem attēliem.
Šajā īpašībā var norādīt arī vairākas
vērtības, atdalot tās ar komatu, kuras tiks
lietotas tādā pašā secībā.
Īpašības vērtības ir līdzīgas galvenajiem režīmiem
grafikas redaktoros.
Sintakse
selektors {
background-blend-mode: režīmi;
}
Tabulā parādītas galvenās īpašības
background-blend-mode vērtības:
Vērtības
| Vērtība | Apraksts |
|---|---|
normal |
Normāls. Krāsu sajaukšana netiek lietota. Noklusējuma režīms. |
multiply |
Reizināšana. Šajā režīmā pamatkrāsas vērtība tiek reizināta ar uzklātās krāsas vērtību. Rezultējošā krāsa vienmēr ir tumšāka krāsa. |
screen |
Izgaismošana. Šajā režīmā tiek reizinātas apgrieztās pamatkrāsas un uzklātās krāsas vērtības. Kā rezultējošā krāsa vienmēr tiek iegūta gaišāka krāsa. |
overlay |
Pārklājums. Šajā režīmā krāsas tiek reizinātas vai izgaismotas atkarībā no pamatkrāsas. Raksti vai krāsas pārklāj esošos pikseļus, atstājot nemainīgus pamatkrāsas gaišos un tumšos apgabalus. |
Piemērs
Apskatīsim, kā izskatīsies attēls
ar īpašības background-blend-mode
noklusējuma vērtību:
<div id="elem"></div>
#elem {
background-blend-mode: normal;
background: url("bg.png") center / cover no-repeat,
linear-gradient(#00A8DE, #FFF) fixed;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Piemērs
Tagad mainīsim īpašības
background-blend-mode vērtību
uz reizināšanu:
<div id="elem"></div>
#elem {
background-blend-mode: multiply;
background: url("bg.png") center / cover no-repeat,
linear-gradient(#00A8DE, #FFF) fixed;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Piemērs
Iestatīsim mūsu attēlam izgaismošanas režīmu:
<div id="elem"></div>
#elem {
background-blend-mode: screen;
background: url("bg.png") center / cover no-repeat,
linear-gradient(#00A8DE, #FFF) fixed;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Skatiet arī
-
īpašība
background,
kas ir saīsinājuma īpašība fonam -
īpašība
background-image,
ar kuru elementam var pievienot fona attēlu -
īpašība
mix-blend-mode,
ar kuru var uzklāt elementa krāsas uz fona -
īpašība
backdrop-filter,
kas ļauj uzklāt filtrus