Maska-attēls - CSS-triki | CSS almanahs 2025

A maskCSS slēpj daļu elementa tiek piemērots.

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

Pieņemsim, ka jums bija elements ar fotogrāfisku fonu un melnbaltu SVG grafiku, ko izmantot kā masku, piemēram:

Jūs varētu iestatīt attēlu kā a background-imageun masku kā mask-imageto pašu elementu un iegūt kaut ko līdzīgu šim:

Maskām ir daudz kopīga ar fonu, jo jūs varat tos izmērīt, novietot un atkārtot, tāpat kā fonus. Skatiet saistītās īpašības zemāk. Bet šeit ir vēl viena interesanta lieta par maskām, kuras viņi dalās ar iepriekšējo pieredzi: tie var būt gradienti.

Lūk, tā pati fona grafika, tikai ar to linear-gradientaizsedzošu masku, kas padara augšējo caurspīdīgo, izbalējot dibenu, kas nemaz nav caurspīdīgs:

Tas darbojas, jo augšpusē linear-gradientir transparent. Es būtu pieņemts, ka tā varētu strādāt, ja tas ir whitetik labi, kamēr mask-typebija luminance, bet tas nešķiet strādāt jebkurā pārlūkā man.

Runājot par luminancemaskām, tas, šķiet, nedarbojas attēliem kā maskām, kas man ir tāds rastra formāts kā JPG.webp vai PNG. Atjauninājums : lasītājs Mišels Hols raksta ar demonstrāciju, kur tam varētu būt kāds sakars ar garo roku īpašību izmantošanu. Šķiet, ka Firefox atbalsta šo koncepciju, ja izmantojat tikai stenogrammu.

Bet alfa maskas, šķiet, darbojas tikai lieliski. Tāpat kā rastra grafikā, kas izmanto faktisko alfa caurspīdīgumu. Kā šis:

Un tikai, lai pierādītu punktu, krāsu animāciju, kuru var redzēt caur masku:

mask-imageĪpašumu var izmantot arī tieši iekšā SVG elementiem. Tāpat kā pārbaudiet šo elipsveida masku, kurai ir arī izplūdis filtrs:

Izskatās, ka jūs varētu aizķerties ar šo SVG masku un pielietot to citiem elementiem, mask-image: url(#mask);bet es neuzskatu, ka tas patiešām darbojas. Tas darbojas tikai SVG iekšienē, un tam ir nepatīkama blakusparādība, pilnībā attēli izdzēšot, ja to izmanto ārpus SVG.