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

mask-modeCSS svojstvo pokazuje je li CSS maskirni sloj slika tretira kao alfa masku masku svjetline.

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

Sintaksa

mask-mode: alpha | luminance | match-source

Objekt prihvaća jednu ključnu vrijednost, ili popis odvojenih zarezom dva ili sva tri alpha, luminancei mask-sourcevrijednosti.

Početna vrijednost: match-source
Odnosi se na: sve elemente. U SVG-u se odnosi na elemente spremnika isključujući element, sve grafičke elemente.
Naslijeđeno: ne
Izračunata vrijednost: kako je navedeno
Vrsta animacije: diskretna

Vrijednosti

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

alpha: specificira da se vrijednosti alfa (alfa kanal) slike sloja maske trebaju koristiti kao vrijednosti maske.
luminance: određuje da se vrijednosti svjetline slike maske trebaju koristiti kao vrijednosti maske.
match-source: zadana vrijednost koja modu maske postavlja na alfa ako je referenca maske mask-imagesvojstva CSS element poput URL-a slike ili gradijenta. Međutim, ako je referenca maske mask-imagesvojstva SVG element, mora se upotrijebiti vrijednost navedena svojstvom tipa maske referenciranog elementa.
initial: primjenjuje zadanu postavku svojstva, koja je match-source.
inherit: prihvaća vrijednost načina rada maske roditelja.
unset: uklanja trenutni način maske iz elementa.

Korištenje više vrijednosti

Ovo svojstvo može uzeti popis vrijednosti odvojenih zarezom za načine maske i svaka se vrijednost primjenjuje na odgovarajuću sliku sloja maske navedenu u svojstvu slike maske.

U sljedećem primjeru prva vrijednost navodi način maske koji odgovara prvoj slici, druga vrijednost za drugu sliku itd.

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

Alfa i maske za osvjetljenje

Maskiranje u CSS dolazi s dvije metode koje imaju neke razlike u izračunavanju vrijednosti maske.

Alfa maske

Slike su izrađene od piksela, svaki piksel sadrži neke podatke koji sadrže vrijednosti boja i možda alfa vrijednosti s informacijama o prozirnosti. Slika s alfa kanalom može biti alfa maska , poput PNG slika s crnim i prozirnim područjima.

U jednostavnoj operaciji maskiranja na vrhu se nalazi element i slika maske. Alfa vrijednost svakog piksela na slici maske spojit će se s odgovarajućim pikselom u elementu.

Ako je vrijednost alfa nula (tj. Prozirna), ona pobjeđuje i taj dio elementa je maskiran (tj. Skriven).
Alfa vrijednost jedan (tj. Potpuno neprozirna) omogućuje da taj piksel elementa bude vidljiv.
Vrijednost između 0 i 1 (npr. 0,5) omogućuje pikselu da bude vidljiv, ali uz određenu razinu prozirnosti.

Dakle, u ovoj metodi vrijednost maske u određenoj točki jednostavno je vrijednost alfa kanala na toj točki slike maske, a kanali u boji ne doprinose vrijednosti maske.

Primjer ispod je alfa maska koja sadrži samo crnu (alfa vrijednost 1) i prozirna područja (alfa vrijednost 0) i možete vidjeti rezultat koji ima neke dijelove koji su potpuno vidljivi, a drugi potpuno prozirni:

Korištenje PNG-a s alfa kanalom kao slike maske

Ali u sljedećem primjeru koristimo gradijent koji ima različitu razinu transparentnosti. Rezultat nije samo vidljiv ili proziran, već postoje neka prozirna područja:

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

I evo kako rezultat izgleda u pregledniku:

Korištenje linearnog gradijenta kao slike maske

Maske za osvjetljenje

U maski za osvjetljenje bitne su boje i alfa vrijednosti. Kada je alfa vrijednost 0 (tj. Potpuno prozirna), element je skriven; kada je alfa vrijednost 1, vrijednosti maske variraju ovisno o kanalu boje tog piksela. Na primjer, kada je boja bijela, element je vidljiv; u slučaju crnog područja, element je skriven.

Iako se izračunavanje vrijednosti maske u alfa maski temelji samo na alfa vrijednostima slike maske, vrijednosti maske maske osvjetljenja izračunavaju se iz osvjetljenosti i alfa vrijednosti. Preglednici to čine u sljedećim koracima:

Izračunajte vrijednost osvjetljenja iz vrijednosti kanala boje.
Pomnožite izračunatu vrijednost osvjetljenja s odgovarajućom alfa vrijednošću da biste dobili vrijednost maske.

/ objašnjenje Za više informacija o ovim izračunima možete pogledati odjeljak obrade maske u specifikaciji CSS Masking Module 1 iz Nacrta urednika iz rujna 2019.

Ispod je slika maske s bijelim suncem u sredini i prozirnim područjima oko nje. Kao što možete vidjeti, dok su područja potpuno vidljiva:

Korištenje PNG slike s alfa kanalom i bijelim područjima kao maske

I u sljedećem primjeru, šareni gradijent koristi se kao slika maske i možete vidjeti učinak različitih boja na vrijednosti maske u načinu osvjetljenja: