Maska-slika - CSS-triki | Almanah CSS 2025

A maskv CSS skriva del elementa, na katerega je uporabljen.

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

Recimo, da ste imeli element s fotografskim ozadjem in črno-belo grafiko SVG, ki jo boste uporabili kot masko, kot je ta:

Sliko lahko nastavite kot a background-imagein masko kot a mask-imagena isti element in dobite nekaj takega:

Maske imajo veliko skupnega z ozadji, saj jih lahko prilagodite, postavite in ponovite, podobno kot ozadja. Oglejte si povezane lastnosti spodaj. Tu pa je še ena zanimivost pri maskah, ki si jih delijo z ozadjem: lahko so prelivi.

Tu je ista slika v ozadju, le da jo linear-gradientpokriva maska, zaradi česar zgornji del prozorno bledi, spodnji pa sploh ni prozoren:

To deluje, ker na vrhu linear-gradientje transparent. Domneval bi, da bi delovalo, če bi bilo whitetako dolgo, kot je mask-typebilo luminance, vendar se mi zdi, da to v nobenem brskalniku ne deluje.

Če govorimo o luminancemaskah, se mi zdi, da to ne deluje pri slikah kot maskah, ki so zame rastrska oblika, kot sta JPG.webp ali PNG. Posodobitev : Reader Micheal Hall piše z predstavitvijo, kjer je morda povezano z uporabo lastnosti dolge roke. Zdi se, da Firefox podpira ta koncept, če uporabljate samo stenografijo.

Toda alfa maske se zdijo v redu. Kot pri rasterskih grafikah, ki uporabljajo dejansko alfa preglednost. Všečkaj to:

In samo za dokazovanje trditve, barvno animacijo, ki jo vidite skozi masko:

mask-imagePremoženje se lahko uporablja tudi neposredno v SVG elementov. Tako kot si oglejte to eliptično masko, ki ima tudi zamegljen filter:

Zdi se, kot da bi lahko zagrabili to masko SVG in jo uporabili za druge elemente z, mask-image: url(#mask);vendar se mi ne zdi, da to dejansko deluje. Deluje samo v SVG in ima neprijeten stranski učinek, da popolnoma izbriše sliko, če se uporablja zunaj SVG.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.