CSS mask-mode ominaisuus

Määritelmä ja käyttö

mask-mode Ominaisuus määrittää, pitäisikö peittokuvan kuvaa näyttää valaistuspeitteinä vai alpha-peitteinä.

Esimerkki

Näytä peittokuvan kuva valaistuspeitteinä:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

Kokeile itse

CSS-kieli

mask-mode: match-source|luminance|alpha|initial|inherit;

Ominaisuusarvo

Arvo Kuvaus
match-source

Jos mask-image-ominaisuus on kuva (kuva-URL tai väriaineisto), aseta mask-mode arvoksi alpha.

Jos mask-image-ominaisuus on SVG <mask>, käytä <mask>-elementin mask-type-ominaisuutta.

Tämä on oletusarvo.
luminance Käytä peittokuvan kirkkausarvoa peittovaluksi.
alpha Käytä peittokuvan alpha-arvoa peittovaluksi.
initial Aseta tämä ominaisuus sen oletusarvoon. Katso: initial.
inherit Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: match-source
Perinnäisyys: Ei
Animaation luominen: Ei tuettu. Katso:Animaatiot.
Versio: CSS Masking Module Taso 1
JavaScript-kieli: object.style.maskMode="alpha"

Selaimen tuki

Taulukon numerot merkitsevät ensimmäistä täysin tukevaa selainta, joka tukee ominaisuutta.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Aiheeseen liittyvät sivut

Oppitunti:CSS peittaus

Viittaus:CSS mask ominaisuus

Viittaus:CSS mask-clip ominaisuus

Viittaus:CSS mask-composite ominaisuus

Viittaus:CSS mask-image ominaisuus

Viittaus:CSS mask-origin ominaisuus

Viittaus:CSS mask-position ominaisuus

Viittaus:CSS mask-repeat ominaisuus

Viittaus:CSS mask-size ominaisuus

Viittaus:CSS mask-type ominaisuus