Mask-režiim - CSS-trikid | CSS-i almanahh 2025

mask-modeCSS omadus näitab kas CSS Maskikiht pilti käsitatakse alfamaski või heleduse mask.

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

Süntaks

mask-mode: alpha | luminance | match-source

Vara nõustub üks märksõna raha või komadega eraldatud nimekiri kahe või kõigi kolme alpha, luminanceja mask-sourceväärtused.

Algne väärtus: match-source
Kehtib kõigi elementide kohta. SVG-s kehtib see konteinerelementidele, välja arvatud element, kõik graafikaelemendid.
Päritud: ei
Arvutatud väärtus: määratletud
Animatsiooni tüüp: diskreetne

Väärtused

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

alpha: määrab, et maskiväärtustena tuleks kasutada maskikihi pildi alfaväärtusi (alfakanalit).
luminance: määrab, et maski väärtustena tuleks kasutada maskipildi heleduse väärtusi.
match-source: vaikeväärtus, mis määrab maskirežiimiks alfa, kui mask-imageatribuudi maskiviide on CSS-i element nagu pildi URL või gradient. Kui aga mask-imageatribuudi maskiviide on SVG element, tuleb kasutada viidatud elemendi mask-tüüpi atribuudiga määratud väärtust .
initial: rakendab atribuudi vaikesätet, mis on match-source.
inherit: võtab vastu vanema maskirežiimi väärtuse.
unset: eemaldab elemendilt praeguse maskirežiimi.

Mitme väärtuse kasutamine

See omadus võib võtta maskirežiimide jaoks komadega eraldatud väärtuste loendi ja iga väärtus rakendatakse mask-pilt atribuudis määratud vastavale maskikihi kujutisele.

Järgmises näites määrab esimene väärtus esimesele pildile vastava maskirežiimi, teise pildi teise väärtuse jne.

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

Alfa- ja heledusmaskid

CSS-is maskeerimine on varustatud kahe meetodiga, millel on maski väärtuste arvutamisel mõningaid erinevusi.

Alfa maskid

Kujutised on valmistatud pikslitest, igal pikselil on mõned andmed, mis sisaldavad värvi väärtusi ja võib-olla ka alfa väärtusi koos läbipaistvuse teabega. Alfa-kanaliga pilt võib olla alfa-mask , nagu mustade ja läbipaistvate aladega PNG-pildid.

Lihtsa maskeerimisoperatsiooni käigus on selle peale pandud element ja maskipilt. Maskipildi iga piksli alfaväärtus liidetakse elemendis vastava piksliga.

Kui alfa väärtus on null (st läbipaistev), võidab see ja elementi see osa on maskeeritud (st peidetud).
Ühe alfaväärtus (st täielikult läbipaistmatu) võimaldab elemendi sellel pikslil olla nähtav.
Väärtus vahemikus 0 kuni 1 (nt 0,5) võimaldab pikslil olla nähtav, kuid teatud läbipaistvuse tasemel.

Niisiis on selle meetodi korral maski väärtus antud punktis lihtsalt alfakanali väärtus maskipildi selles punktis ja värvikanalid ei aita kaasa maski väärtusele.

Näidis on alfa-mask, mis sisaldab ainult musta (alfa-väärtus 1) ja läbipaistvaid alasid (alfa-väärtus 0) ja näete tulemust, kus mõned osad on täielikult nähtavad ja teised täiesti läbipaistvad:

Alfakanaliga PNG kasutamine maskipildina

Kuid järgmises näites kasutame gradienti, millel on erinev läbipaistvuse tase. Tulemus pole mitte ainult nähtav ega läbipaistev, vaid on ka mõned poolläbipaistvad alad:

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

Ja kuidas brauseris tulemus välja näeb:

Lineaarse gradiendi kasutamine maskipildina

Heleduse maskid

Heledusmaski puhul on värvid ja alfaväärtused olulised. Kui alfa väärtus on 0 (st täielikult läbipaistev), on element peidetud; kui alfa väärtus on 1, varieeruvad maski väärtused sõltuvalt selle piksli värvikanalist. Näiteks kui värv on valge, on element nähtav; musta ala puhul on element peidetud.

Kui alfamaski maskiväärtuste arvutamine põhineb ainult maskipildi alfaväärtustel, arvutatakse heledusmaski maskiväärtused heleduse ja alfa väärtuste põhjal. Brauserid teevad seda järgmiste toimingutega.

Arvutage heleduse väärtus värvikanali väärtustest.
Maski väärtuse saamiseks korrutage arvutatud heleduse väärtus vastava alfa väärtusega.

/ Selgitus Nende arvutuste kohta lisateabe saamiseks vaadake jaotise Maskide töötlemine jaotist CSS Masking Module 1 spetsifikatsioonis alates 2019. aasta redaktori mustandist.

Bellow on maskipilt, mille keskel on valge päike ja selle ümber läbipaistvad alad. Nagu näete, on piirkonnad täielikult nähtavad: