Maskas režīms - CSS-triki | CSS almanahs 2025

mask-modeCSS īpašums norāda, vai CSS maska slānis attēls tiek uzskatīta kā alfa masku vai spilgtuma masku.

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

Sintakse

mask-mode: alpha | luminance | match-source

Īpašums pieņem vienu atslēgvārdu vērtību, vai ar komatu atdalīti divi vai visi trīs alpha, luminanceun mask-sourcevērtības.

Sākotnējā vērtība: match-source
Attiecas uz: visiem elementiem. SVG tas attiecas uz konteinera elementiem, izņemot elementu, visus grafiskos elementus.
Mantots: nē
Aprēķinātā vērtība: kā norādīts
Animācijas veids: diskrēts

Vērtības

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

alpha: norāda, ka kā maskas vērtības jāizmanto maskas slāņa attēla alfa vērtības (alfa kanāls).
luminance: norāda, ka kā maskas vērtības jāizmanto maskas attēla spilgtuma vērtības.
match-source: noklusējuma vērtība, kas maskas režīmu iestata alfa, ja mask-imagerekvizīta maskas atsauce ir CSS elements, piemēram, attēla URL vai gradients. Tomēr, ja mask-imagerekvizīta maskas atsauce ir SVG elements, jāizmanto atsauces elementa maskas tipa rekvizītā norādītā vērtība.
initial: piemēro īpašuma noklusējuma iestatījumu, kas ir match-source.
inherit: pieņem vecāku maskas režīma vērtību.
unset: noņem pašreizējo maskas režīmu no elementa.

Vairāku vērtību izmantošana

Šis rekvizīts var ņemt komatu atdalītu vērtību sarakstu masku režīmiem, un katra vērtība tiek piemērota attiecīgajam maskas slāņa attēlam, kas norādīts rekvizītā mask-image.

Šajā piemērā pirmā vērtība norāda maskas režīmu, kas atbilst pirmajam attēlam, otrā vērtība otrajam attēlam utt.

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

Alfa un spilgtuma maskas

Maskēšana CSS nāk ar divām metodēm, kurām ir dažas atšķirības maskas vērtību aprēķināšanā.

Alfa maskas

Attēli ir izgatavoti no pikseļiem, katram pikseļam ir daži dati, kas satur krāsu vērtības un varbūt alfa vērtības ar informāciju par caurspīdīgumu. Attēls ar alfa kanālu var būt alfa maska , piemēram, PNG attēli ar melniem un caurspīdīgiem laukumiem.

Veicot vienkāršu maskēšanas darbību, mums virs tā ir ievietots elements un maskas attēls. Katra maskas attēla pikseļa alfa vērtība tiks apvienota ar tā atbilstošo pikseļu elementā.

Ja alfa vērtība ir nulle (ti, caurspīdīga), tā uzvar un šī elementa daļa tiek maskēta (ti, paslēpta).
Alfa vērtība viens (ti, pilnīgi necaurspīdīgs) ļauj šim elementa pikseļam būt redzamam.
Vērtība starp 0 un 1 (piemēram, 0,5) ļauj pikseļiem būt redzamiem, bet ar zināmu pārredzamības līmeni.

Tātad šajā metodē maskas vērtība noteiktā punktā ir vienkārši alfa kanāla vērtība tajā maskas attēla punktā, un krāsu kanāli neveicina maskas vērtību.

Zemāk redzamais piemērs ir alfa maska, kas satur tikai melnu (alfa vērtība 1) un caurspīdīgus laukumus (alfa vērtība 0), un jūs varat redzēt rezultātu, kurā dažas daļas ir pilnībā redzamas, bet citas pilnībā caurspīdīgas:

PNG ar alfa kanālu izmantošana kā maskas attēls

Bet šajā piemērā mēs izmantojam gradientu, kuram ir atšķirīgs pārredzamības līmenis. Rezultāts nav tikai redzams vai caurspīdīgs, bet ir dažas caurspīdīgas zonas:

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

Lūk, kā rezultāts izskatās pārlūkprogrammā:

Lineārā gradienta izmantošana kā maskas attēls

Spilgtuma maskas

Spilgtuma maskā krāsas un alfa vērtības ir svarīgas. Kad alfa vērtība ir 0 (ti, pilnīgi caurspīdīga), elements tiek paslēpts; kad alfa vērtība ir 1, maskas vērtības mainās atkarībā no šī pikseļa krāsu kanāla. Piemēram, ja krāsa ir balta, elements ir redzams; melnā apgabala gadījumā elements ir paslēpts.

Lai gan maskas vērtību aprēķināšana alfa maskā balstās tikai uz maskas attēla alfa vērtībām, spilgtuma maskas maskas vērtības tiek aprēķinātas no spilgtuma un alfa vērtībām. Pārlūkprogrammas to veic, veicot šādas darbības:

Aprēķiniet spilgtuma vērtību no krāsu kanāla vērtībām.
Reiziniet aprēķināto spilgtuma vērtību ar atbilstošo alfa vērtību, lai iegūtu maskas vērtību.

/ paskaidrojums Lai iegūtu papildinformāciju par šiem aprēķiniem, skatiet sadaļu Maskas apstrāde CSS maskēšanas 1. moduļa specifikācijā no 2019. gada septembra redaktora melnraksta.

Bellow ir maskas attēls ar baltu sauli centrā un caurspīdīgām vietām ap to. Kā redzat, kamēr apgabali ir pilnībā redzami: