Maszk-mód - CSS-trükkök | CSS Almanach 2025

A mask-modeCSS tulajdonság jelzi, hogy a CSS maszk réteg képét alfa vagy luminancia maszkként kezelik-e.

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

Szintaxis

mask-mode: alpha | luminance | match-source

Az ingatlan elfogadja egy kulcsszó értéke, vagy vesszővel elválasztott listája kettő vagy mind a három alpha, luminanceés mask-sourceértékeket.

Kezdő érték: match-source
Alkalmazható: minden elem. Az SVG-ben a konténerelemekre vonatkozik, kivéve az elemet, az összes grafikai elemet.
Örökölt: nem
Számított érték: a megadott
Animáció típusa: diszkrét

Értékek

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

alpha: megadja, hogy a maszk réteg képének alfa értékeit (alfa csatornáját) kell használni maszk értékként.
luminance: megadja, hogy maszkértékként a maszk kép fényerejét kell használni.
match-source: az alapértelmezett érték, amely a maszk módot alfára állítja, ha a mask-imagetulajdonság maszk referenciája CSS elem, például kép URL vagy színátmenet. Ha azonban a mask-imagetulajdonság maszkreferenciája SVG elem, akkor a hivatkozott elem maszk típusú tulajdonságában megadott értéket kell használni.
initial: a tulajdonság alapértelmezett beállítását alkalmazza match-source.
inherit: elfogadja a szülő maszk mód módját.
unset: eltávolítja az aktuális maszk módot az elemről.

Több érték használata

Ez a tulajdonság vesszővel elválasztott értéklistát vehet fel a maszk módokhoz, és mindegyik értéket a maszk-kép tulajdonságban megadott megfelelő maszk réteg képre alkalmazzák.

A következő példában az első érték meghatározza az első képnek megfelelő maszk módot, a második kép második értéke stb.

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

Alfa- és fényerősségű maszkok

A CSS-ben történő maszkolás két módszerrel jár, amelyek némi különbséggel rendelkeznek a maszkértékek kiszámításában.

Alfa maszkok

A képek pixelekből készülnek, mindegyik pixelben vannak olyan adatok, amelyek színes értékeket tartalmaznak, és esetleg alfa értékeket tartalmaznak átlátszósági információkkal. Az alfa csatornával rendelkező kép lehet alfa maszk , például a fekete és átlátszó területekkel rendelkező PNG képek.

Egyszerű maszkolási művelet során egy elemet és egy maszk képet helyezünk el a tetején. A maszkkép minden egyes képpontjának alfaértéke összeolvad az elemben lévő megfelelő pixellel.

Ha az alfa értéke nulla (azaz átlátszó), akkor az nyer, és az elem egy része maszkolt (azaz rejtett).
Az egyik alfa értéke (azaz teljesen átlátszatlan) lehetővé teszi az elem pixelének láthatóvá válását.
A 0 és 1 közötti érték (pl. 0,5) lehetővé teszi a pixel láthatóságát, de bizonyos átlátszóság mellett.

Tehát ebben a módszerben a maszk értéke egy adott ponton egyszerűen az alfa-csatorna értéke a maszk kép azon pontján, és a színcsatornák nem járulnak hozzá a maszk értékéhez.

A pörgős példa egy alfa maszk, amely csak feketét (alfa értéke 1) és átlátszó területeket (alfa értéke 0) tartalmaz, és láthatja az eredményt, amelynek egyes részei teljesen láthatók, mások teljesen átlátszók:

Alfa csatornával rendelkező PNG használata maszkképként

De a következő példában gradienst használunk, amelynek átláthatósági szintje eltérő. Az eredmény nemcsak látható vagy átlátszó, de van néhány áttetsző terület is:

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

És így néz ki az eredmény a böngészőben:

Lineáris gradiens használata maszkképként

Fényerő maszkok

A fényerő-maszkban a színek és az alfa-értékek számítanak. Ha az alfa értéke 0 (azaz teljesen átlátszó), az elem el van rejtve; ha az alfa értéke 1, a maszk értékei az adott pixel színcsatornájától függően változnak. Például, ha a szín fehér, az elem látható; fekete terület esetén az elem el van rejtve.

Míg az alfa maszkban a maszkértékek kiszámítása csak a maszk kép alfa értékein alapul, a luminancia maszk maszk értékeit a fényerő és az alfa értékekből számítják ki. A böngészők ezt a következő lépésekkel teszik:

Számítsa ki a fényerő értékét a színcsatorna értékeiből.
Szorozzuk meg a kiszámított fényerő értéket a megfelelő alfa értékkel a maszkérték előállításához.

/ magyarázat A számításokkal kapcsolatos további információkért tekintse meg a maszkfeldolgozás részt a CSS Masking Module 1 modul specifikációjában a 2019 szeptemberi szerkesztő tervezetéből.

A Bellow egy maszkkép, amelynek közepén fehér nap és körülötte átlátszó területek találhatók. Amint láthatja, míg a területek teljesen láthatók: