A maskCSS peidab osa elemendist, millele rakendatakse.
.el ( mask-image: url(star.svg); )Oletame, et teil on maskina kasutamiseks fotograafilise taustaga element ja must-valge SVG-graafika:
Saate määrata pildi samaks background-imageja maski mask-imagesamaks elemendiks ning saada midagi sellist:
Maskidel on taustadega palju ühist, kuna saate neid suurust muuta, paigutada ja korrata ning sarnaseid taustu. Vaadake seotud omadusi allpool. Kuid siin on veel üks huvitav asi maskide kohta, mida nad taustaga jagavad: need võivad olla gradientideks.
Siin on sama taustagraafika, ainult seda linear-gradientvarjatud maskiga, mis muudab ülemise osa läbipaistvaks ja pleegib põhja, mis pole üldse läbipaistev:
See töötab, sest ülaosa linear-gradienton transparent. Ma oleksin arvanud, et see töötab, kui see on whitesama hea kui mask-typeoli luminance, kuid see ei tundu minu jaoks üheski brauseris töötavat.
Maskidest rääkides luminanceei tundu see, et see sobib piltide-maskidena, mis on minu jaoks rastervormingus nagu JPG.webp või PNG. Uuendus : lugeja Micheal Hall kirjutab sisse demoga, kus sellel võib olla pistmist pikkade käte omaduste kasutamisega. Tundub, et Firefox toetab seda kontseptsiooni, kui kasutate ainult stenogrammi.
Kuid alfa maskid näivad töötavat just suurepäraselt. Nagu rastergraafikas, mis kasutab tegelikku alfa-läbipaistvust. Nagu nii:
Ja lihtsalt punkti tõestuseks, värvianimatsioon, mida näete läbi maski:
mask-imageVara võib kasutada ka otse sees SVG elemente. Vaadake nagu seda elliptilist maski, millel on ka udune filter:
Tundub, et võiksite selle SVG maski kinni haarata ja teistele elementidele rakendada, mask-image: url(#mask);kuid ma ei leia, et see tegelikult töötab. See töötab ainult SVG-s ja sellel on vastik kõrvalmõju, kui pilt kustutatakse täielikult, kui seda kasutatakse väljaspool SVG-d.
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 91 * | 53 | Ei | 88 * | TP * |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 * | 85 | 81 * | 14,0–14,4 * |