Mask-mode - CSS-Tricks | Almanah CSS 2025

Proprietatea mask-modeCSS indică dacă imaginea stratului de mască CSS este tratată ca o mască alfa sau o mască de luminanță.

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

Sintaxă

mask-mode: alpha | luminance | match-source

Proprietatea acceptă o valoare cuvânt cheie, sau o listă separată prin virgulă de două sau toate cele trei alpha, luminanceși mask-sourcevalori.

Valoarea initiala: match-source
Se aplică tuturor elementelor. În SVG, se aplică elementelor containerului, cu excepția elementului, toate elementele grafice.
Moștenit: nu
Valoare calculată: conform specificațiilor
Tipul de animație: discret

Valori

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

alpha: specifică faptul că valorile alfa (canal alfa) ale imaginii stratului de mască trebuie utilizate ca valori ale măștii.
luminance: specifică faptul că valorile de luminanță ale imaginii măștii trebuie utilizate ca valori ale măștii.
match-source: valoarea implicită, care setează modul de mască la alfa dacă referința de mască a mask-imageproprietății este un element CSS , cum ar fi o imagine URL sau un gradient. Cu toate acestea, dacă referința de mască a mask-imageproprietății este un element SVG , trebuie utilizată valoarea specificată de proprietatea de tip mască a elementului de referință .
initial: aplică setarea implicită a proprietății, care este match-source.
inherit: adoptă valoarea în modul mască a părintelui.
unset: elimină modul de mascare curent din element.

Folosind valori multiple

Această proprietate poate lua o listă de valori separate prin virgulă pentru modurile de mască și fiecare valoare este aplicată unei imagini corespunzătoare a stratului de mască specificată în proprietatea imagine-mască.

În exemplul următor, prima valoare specifică modul de mască corespunzător primei imagini, a doua valoare pentru a doua imagine și așa mai departe.

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

Măști alfa și luminante

Mascare în CSS vine cu două metode care au unele diferențe în calcularea valorilor măștii.

Măști alfa

Imaginile sunt formate din pixeli, fiecare pixel are unele date care conțin valori de culoare și poate valori alfa cu informații de transparență. O imagine cu un canal alfa poate fi o mască alfa , cum ar fi imaginile PNG cu zone negre și transparente.

Într-o operație de mascare simplă, avem un element și o imagine de mască plasate deasupra acestuia. Valoarea alfa a fiecărui pixel din imaginea măștii va fi îmbinată cu pixelul corespunzător din element.

Dacă valoarea alfa este zero (adică transparentă), ea câștigă și acea parte a elementului este mascată (adică ascunsă).
O valoare alfa a unuia (adică complet opacă) permite ca acel pixel al elementului să fie vizibil.
O valoare cuprinsă între 0 și 1 (de exemplu, 0,5) permite pixelului să fie vizibil, dar cu un anumit nivel de transparență.

Deci, în această metodă, valoarea măștii la un punct dat este pur și simplu valoarea canalului alfa în acel punct al imaginii măștii, iar canalele de culoare nu contribuie la valoarea măștii.

Exemplul de mai jos este o mască alfa care conține doar negru (valoarea alfa de 1) și zone transparente (valoarea alfa de 0) și puteți vedea rezultatul care are unele părți complet vizibile și altele complet transparente:

Utilizarea unui PNG cu un canal alfa ca imagine de mască

Dar în exemplul următor, folosim un gradient care are un nivel diferit de transparență. Rezultatul nu este doar vizibil sau transparent, dar există câteva zone translucide:

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

Iată cum arată rezultatul în browser:

Utilizarea unui gradient liniar ca imagine de mască

Măști luminante

Într-o mască de luminanță, culorile și valorile alfa contează. Când valoarea alfa este 0 (adică complet transparentă), elementul este ascuns; când valoarea alfa este 1, valorile măștii variază în funcție de canalul de culoare al pixelului respectiv. De exemplu, când culoarea este albă, elementul este vizibil; în cazul zonei negre, elementul este ascuns.

În timp ce calculul valorilor măștii într-o mască alfa se bazează numai pe valorile alfa ale imaginii măștii, valorile măștii unei măști de luminanță sunt calculate din valorile de luminanță și alfa. Browserele fac acest lucru în următorii pași:

Calculați o valoare a luminanței din valorile canalului de culoare.
Înmulțiți valoarea de luminanță calculată cu valoarea alfa corespunzătoare pentru a produce valoarea măștii.

/ explicație Pentru mai multe informații despre aceste calcule, puteți consulta secțiunea de procesare a măștii din specificația CSS Masking Module 1 din proiectul editorului din septembrie 2019.

Bellow este o imagine de mască cu un soare alb în centru și zone transparente în jurul său. După cum puteți vedea, zonele while sunt complet vizibile:

Utilizarea unei imagini PNG cu un canal alfa și zone albe ca imagine de mască

Și în exemplul următor, un gradient colorat este folosit ca imagine de mască și puteți vedea efectul diferitelor culori asupra valorilor măștii în modul de luminanță: