Naamaritila - CSS-temppuja | CSS-almanakka 2025

mask-modeCSS ominaisuus ilmaisee, onko CSS maskikerros kuva käsitellään alfa maski tai luminanssi maski.

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

Syntaksi

mask-mode: alpha | luminance | match-source

Omaisuuden hyväksyy yhden avainsanan arvo, tai pilkuilla erotettu kaksi tai kaikki kolme alpha, luminanceja mask-sourcearvot.

Alkuarvo: match-source
Koskee kaikkia elementtejä. SVG: ssä se koskee konttielementtejä, lukuun ottamatta elementtiä, kaikkia grafiikkaelementtejä.
Peritty: ei
Laskettu arvo: määritelty
Animaation tyyppi: erillinen

Arvot

/* 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äärittää, että maskiarvona tulisi käyttää maskikerroksen kuvan alfa-arvoja (alfakanavia).
luminance: määrittää, että maskiarvona tulisi käyttää maskikuvan kirkkausarvoja.
match-source: oletusarvo, joka asettaa maskitilan alfaksi, jos mask-imageominaisuuden maskiviite on CSS- elementti, kuten kuvan URL-osoite tai kaltevuus. Jos kuitenkin mask-imageominaisuuden maskiviite on SVG- elementti, on käytettävä viitatun elementin maskityypin ominaisuuden määrittelemää arvoa .
initial: soveltaa kiinteistön oletusasetusta, joka on match-source.
inherit: hyväksyy vanhemman mask-mode-arvon.
unset: poistaa nykyisen maskitilan elementistä.

Useiden arvojen käyttö

Tämä ominaisuus voi ottaa pilkulla erotetun arvoluettelon peitetiloille, ja jokainen arvo lisätään vastaavalle maskikuvan ominaisuudelle määritetylle maskikerroksen kuvalle.

Seuraavassa esimerkissä ensimmäinen arvo määrittää ensimmäistä kuvaa vastaavan naamaritilan, toisen kuvan toisen arvon ja niin edelleen.

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

Alfa- ja kirkkausnaamarit

CSS: n peittäminen sisältää kaksi menetelmää, joilla on joitain eroja maskiarvojen laskemisessa.

Alfa-naamarit

Kuvat on tehty pikseleistä, jokaisessa pikselissä on joitain tietoja, jotka sisältävät väriarvoja ja ehkä alfa-arvoja, joissa on läpinäkyvyystietoja. Alfa-kanavalla varustettu kuva voi olla alfa-peite , kuten PNG-kuvat, joissa on mustat ja läpinäkyvät alueet.

Yksinkertaisessa naamiointitoiminnossa sen päälle on asetettu elementti ja maskikuva. Jokaisen maskikuvan pikselin alfa-arvo yhdistetään vastaavaan pikseliin elementissä.

Jos alfa-arvo on nolla (ts. Läpinäkyvä), se voittaa ja elementin osa on peitetty (eli piilotettu).
Yhden alfa-arvon (eli täysin läpinäkymättömän) ansiosta elementin pikseli on näkyvissä.
Arvo välillä 0 ja 1 (esim. 0,5) antaa pikselin olla näkyvissä, mutta tietyllä läpinäkyvyydellä.

Joten tässä menetelmässä maskin arvo tietyssä pisteessä on yksinkertaisesti alfa-kanavan arvo maskikuvan kyseisessä kohdassa, ja värikanavat eivät vaikuta maskiarvoon.

Esimerkki paljas on alfa-maski, joka sisältää vain mustaa (alfa-arvo 1) ja läpinäkyviä alueita (alfa-arvo 0), ja näet tuloksen, jossa jotkut osat ovat täysin näkyvissä ja toiset täysin läpinäkyvissä:

Alfa-kanavan sisältävän PNG: n käyttäminen maskina

Mutta seuraavassa esimerkissä käytämme kaltevuutta, jolla on erilainen läpinäkyvyys. Tulos ei ole vain näkyvä tai läpinäkyvä, mutta on joitain läpikuultavia alueita:

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

Ja näin näyttää tulos selaimessa:

Luminanssinaamarit

Luminanssinaamiossa värit ja alfa-arvot ovat tärkeitä. Kun alfa-arvo on 0 (eli täysin läpinäkyvä), elementti on piilotettu; kun alfa-arvo on 1, maskin arvot vaihtelevat kyseisen pikselin värikanavan mukaan. Esimerkiksi, kun väri on valkoinen, elementti on näkyvissä; mustan alueen kohdalla elementti on piilotettu.

Vaikka maskiarvojen laskeminen alfa-maskissa perustuu vain maskikuvan alfa-arvoihin, luminanssimaskin maskiarvot lasketaan luminanssin ja alfa-arvojen perusteella. Selaimet tekevät tämän seuraavissa vaiheissa:

Laske kirkkausarvo värikanavan arvoista.
Kerro laskettu luminanssiarvo vastaavalla alfa-arvolla peitteen arvon tuottamiseksi.

/ Selitys Lisätietoja näistä laskelmista saat tutustumalla maskin käsittelyyn CSS: n naamiointimoduulin 1 määrittelyyn syyskuun 2019 editorin luonnoksesta.

Bellow on naamion kuva, jonka keskellä on valkoinen aurinko ja läpinäkyvät alueet sen ympärillä. Kuten näette, vaikka alueet ovat täysin näkyvissä: