Način maske - CSS-triki | Almanah CSS 2025

Lastnost mask-modeCSS označuje, ali se slika sloja maske CSS obravnava kot maska alfa ali maska svetilnosti.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Sintaksa

mask-mode: alpha | luminance | match-source

Lastnina sprejema eno ključno besedo vrednosti, ali z vejicami ločen seznam dva ali vse tri alpha, luminancein mask-sourcevrednote.

Začetna vrednost: match-source
Velja za: vse elemente. V SVG velja za elemente vsebnika, razen elementa, vseh grafičnih elementov.
Podedovano: ne
Izračunana vrednost: kot je določeno
Vrsta animacije: diskretna

Vrednote

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: določa, da se kot vrednosti maske uporabljajo vrednosti alfa (alfa kanal) slike sloja maske.
luminance: določa, da se vrednosti svetilnosti slike maske uporabljajo kot vrednosti maske.
match-source: privzeta vrednost, ki nastavi način maske na alfa, če je referenca maske mask-imagelastnosti element CSS, kot je URL slike ali gradient. Če pa je sklic na masko mask-imagelastnosti SVG , je treba uporabiti vrednost, določeno z lastnostjo vrste maske sklicanega elementa .
initial: uporabi privzeto nastavitev lastnosti, ki je match-source.
inherit: sprejme vrednost načina maske nadrejenega.
unset: odstrani trenutni način maske iz elementa.

Uporaba več vrednosti

Ta lastnost lahko zapiše seznam vrednosti, ločenih z vejico, za načine maske in vsaka vrednost se uporabi za ustrezno sliko sloja maske, določeno v lastnosti maske-slike.

V naslednjem primeru prva vrednost določa način maske, ki ustreza prvi sliki, druga vrednost drugi sliki itd.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Alfa in luminance maske

Maskiranje v CSS ima dve metodi, ki imata nekatere razlike pri izračunu vrednosti maske.

Alfa maske

Slike so narejene iz slikovnih pik, v vsaki slikovni piki je nekaj podatkov, ki vsebujejo barvne vrednosti in morda vrednosti alfa z informacijami o prosojnosti. Slika z alfa kanalom je lahko alfa maska , na primer slike PNG s črnimi in prozornimi površinami.

Pri preprosti operaciji maskiranja imamo na vrhu element in sliko maske. Vrednost alfa vsake slikovne pike na sliki maske bo združena s pripadajočo slikovno piko v elementu.

Če je vrednost alfa nič (tj. Prosojna), zmaga in del elementa je prikrit (tj. Skrit).
Alfa vrednost ena (tj. Popolnoma neprozorna) omogoča, da je ta slikovna pika elementa vidna.
Vrednost med 0 in 1 (npr. 0,5) omogoča, da je slikovna pika vidna, vendar z določeno stopnjo preglednosti.

V tej metodi je vrednost maske na določeni točki preprosto vrednost alfa kanala na tej točki slike maske in barvni kanali ne prispevajo k vrednosti maske.

Primer spodaj je maska alfa, ki vsebuje samo črno (vrednost alfa 1) in prozorna območja (vrednost alfa 0), zato lahko vidite rezultat, ki ima nekatere dele popolnoma vidne, drugi pa popolnoma prozorne:

Uporaba PNG-ja z alfa-kanalom kot sliko maske

Toda v naslednjem primeru uporabljamo gradient z različno stopnjo preglednosti. Rezultat ni le viden ali pregleden, ampak obstaja nekaj prosojnih področij:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

In tako je videti rezultat v brskalniku:

Uporaba linearnega gradienta kot slike maske

Maske za svetilnost

V svetilni maski so barve in vrednosti alfa pomembne. Ko je vrednost alfa 0 (tj. Popolnoma pregledna), je element skrit; če je vrednost alfa 1, se vrednosti maske razlikujejo glede na barvni kanal te slikovne pike. Na primer, ko je barva bela, je element viden; v primeru črne površine je element skrit.

Medtem ko izračun vrednosti maske v alfa maski temelji le na vrednostih alfa slike maske, se vrednosti maske maske svetilnosti izračunajo iz vrednosti luminance in alfa vrednosti. Brskalniki to storijo v naslednjih korakih:

Iz vrednosti barvnega kanala izračunajte vrednost svetilnosti.
Izračunano vrednost svetilnosti pomnožite z ustrezno vrednostjo alfa, da dobite vrednost maske.

/ pojasnilo Za več informacij o teh izračunih si lahko ogledate razdelek za obdelavo maske v specifikaciji CSS Masking Module 1 iz Osnutka urejevalnika septembra 2019.

Spodaj je slika maske z belim soncem v sredini in prozornimi predeli okoli nje. Kot lahko vidite, so območja while popolnoma vidna: