Kaukės režimas - CSS-gudrybės | CSS almanachas 2025

mask-modeCSS nuosavybė parodo, ar CSS kaukė sluoksnis vaizdo traktuojamas kaip alfa kauke ar skaisčio kauke.

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

Sintaksė

mask-mode: alpha | luminance | match-source

Turtas priima vieną raktažodžių vertę, arba kableliais atskirtų dviejų ar visų trijų alpha, luminanceir mask-sourcevertybes.

Pradinė vertė: match-source
Taikoma: visiems elementams. SVG jis taikomas konteinerio elementams, išskyrus elementą, visus grafikos elementus.
Paveldima: ne
Apskaičiuota vertė: kaip nurodyta
Animacijos tipas: diskretiškas

Vertybės

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

alpha: nurodo, kad kaukės sluoksnio vaizdo alfa vertės (alfa kanalas) turėtų būti naudojamos kaip kaukės vertės.
luminance: nurodo, kad kaukės vaizdo ryškumo vertės turėtų būti naudojamos kaip kaukės vertės.
match-source: numatytoji reikšmė, kuri nustato kaukės režimą į alfa, jei ypatybės kaukės nuoroda mask-imageyra CSS elementas, pvz., vaizdo URL arba gradientas. Tačiau jei ypatybės kaukės nuoroda mask-imageyra SVG elementas, reikia naudoti nurodyto elemento kaukės tipo ypatybėje nurodytą vertę .
initial: taiko numatytąjį nuosavybės nustatymą, kuris yra match-source.
inherit: priima tėvų kaukės režimo vertę.
unset: pašalina dabartinį kaukės režimą iš elemento.

Naudojant kelias reikšmes

Ši ypatybė gali sudaryti kableliais atskirtą kaukių režimų reikšmių sąrašą, o kiekviena reikšmė taikoma atitinkamam kaukės sluoksnio vaizdui, nurodytam kaukės vaizdo ypatybėje.

Šiame pavyzdyje pirmoji reikšmė nurodo kaukės režimą, atitinkantį pirmąjį vaizdą, antrąją reikšmę antram vaizdui ir pan.

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

Alfa ir skaisčio kaukės

Maskuojant CSS yra du metodai, turintys tam tikrų skirtumų skaičiuojant kaukės reikšmes.

Alfa kaukės

Vaizdai yra pagaminti iš pikselių, kiekviename pikselyje yra keletas duomenų, kuriuose yra spalvų vertės, o galbūt alfa vertės su skaidrumo informacija. Vaizdas su alfa kanalu gali būti alfa kaukė , pavyzdžiui, PNG vaizdai su juodomis ir skaidriomis sritimis.

Atliekant paprastą maskavimo operaciją, ant jo dedame elementą ir kaukės vaizdą. Kiekvieno kaukės vaizdo pikselio alfa vertė bus sujungta su atitinkamu elemento pikseliu.

Jei alfa vertė yra lygi nuliui (ty skaidri), ji laimi ir ta elemento dalis yra užmaskuota (ty paslėpta).
Alfa vertė (ty visiškai nepermatoma) leidžia tą elemento pikselį matyti.
Vertė nuo 0 iki 1 (pvz., 0,5) leidžia pikseliui būti matomam, tačiau užtikrinant tam tikrą skaidrumą.

Taigi taikant šį metodą, kaukės vertė tam tikrame taške yra tiesiog alfa kanalo vertė toje kaukės vaizdo vietoje, o spalvų kanalai neprisideda prie kaukės vertės.

Žemiau pateiktas pavyzdys yra alfa kaukė, kurioje yra tik juoda (alfa vertė 1) ir skaidrios sritys (alfa vertė 0), ir jūs galite pamatyti rezultatą, kurio kai kurios dalys yra visiškai matomos, o kitos - visiškai skaidrios:

Naudojant PNG su alfa kanalu kaip kaukės vaizdą

Tačiau šiame pavyzdyje mes naudojame skirtingo skaidrumo gradientą. Rezultatas yra ne tik matomas ar skaidrus, bet yra keletas permatomų sričių:

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

Štai kaip atrodo rezultatas naršyklėje:

Linijinio gradiento naudojimas kaip kaukės vaizdas

Šviesos kaukės

Šviesos kaukėje svarbu spalvos ir alfa vertės. Kai alfa vertė yra 0 (ty visiškai skaidri), elementas yra paslėptas; kai alfa vertė yra 1, kaukės vertės skiriasi priklausomai nuo to taško spalvų kanalo. Pavyzdžiui, kai spalva yra balta, elementas yra matomas; juodo ploto atveju elementas yra paslėptas.

Nors skaičiuojant kaukės reikšmes alfa kaukėje, remiamasi tik kaukės vaizdo alfa vertėmis, skaisčio kaukės vertės skaičiuojamos pagal skaisčio ir alfa reikšmes. Naršyklės tai daro atlikdami šiuos veiksmus:

Apskaičiuokite ryškumo vertę iš spalvų kanalo reikšmių.
Padauginkite apskaičiuotą skaisčio vertę iš atitinkamos alfa vertės, kad gautumėte kaukės vertę.

/ paaiškinimas Norėdami gauti daugiau informacijos apie šiuos skaičiavimus, galite apsilankyti kaukių apdorojimo skyriuje CSS maskavimo modulio 1 specifikacijoje iš 2019 m. rugsėjo mėn. redaktoriaus juodraščio.

Bellow yra kaukės atvaizdas, kurio centre yra balta saulė ir skaidrios zonos aplink jį. Kaip matote, kol zonos yra visiškai matomos: