Naamio-kuva - CSS-temppuja | CSS-almanakka 2025

A maskCSS-piilotuksissa osa elementistä kohdistetaan.

.el ( mask-image: url(star.svg); )

Oletetaan, että sinulla on valokuva-taustalla oleva elementti ja mustavalkoinen SVG-grafiikka käytettäväksi maskina, kuten tämä:

Voit asettaa kuvan background-imageja maskin mask-imagesamalle elementille ja saada jotain tällaista:

Naamioilla on paljon yhteistä taustojen kanssa siinä, että voit muuttaa niiden kokoa, sijoittaa ne ja toistaa niitä ja vastaavia kuten taustat. Katso aiheeseen liittyvät ominaisuudet alla. Mutta tässä on toinen mielenkiintoinen asia naamioista, jotka he jakavat taustan kanssa: ne voivat olla kaltevuuksia.

Tässä on sama taustagrafiikka, vain linear-gradientpeitettynä peitteellä, joka tekee yläosasta läpinäkyvän haalistuvan pohjan, joka ei ole ollenkaan läpinäkyvä:

Se toimii, koska sen yläosa linear-gradienton transparent. Olisin uskonut, että se toimisi, jos se olisi whiteyhtä pitkä kuin mask-typeoli luminance, mutta se ei tunnu toimivan missään selaimessa minulle.

Naamioista puhuen luminance, se ei näytä toimivan kuvamaskina, jotka ovat minulle rasterimuotoa, kuten JPG.webp tai PNG. Päivitys : Lukija Micheal Hall kirjoittaa esittelyn, jossa sillä voi olla jotain tekemistä pitkäkäden ominaisuuksien kanssa. Firefox näyttää tukevan tätä käsitettä, jos käytät vain lyhyttä.

Mutta alfanaamarit näyttävät toimivan hienosti. Kuten rasterigrafiikoissa, joissa käytetään todellista alfa-läpinäkyvyyttä. Kuten tämä:

Ja vain todistamaan kohta, värianimaatio, jonka näet maskin kautta:

mask-imageOminaisuus voidaan käyttää myös suoraan sisällä SVG elementtejä. Kuten, tarkista tämä elliptinen naamio, jolla on myös näön suodatin:

Näyttää siltä, että voisit tarttua SVG-naamioon ja levittää sitä muihin elementteihin, mask-image: url(#mask);mutta en löydä, että se todella toimii. Se toimii vain SVG: ssä, ja sillä on ikävä sivuvaikutus, joka poistaa kuvan kokonaan, jos sitä käytetään SVG: n ulkopuolella.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.