Maschera-immagine - Trucchi CSS

Un maskin CSS nasconde una parte dell'elemento a cui viene applicata.

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

Supponi di avere un elemento con uno sfondo fotografico e una grafica SVG in bianco e nero da utilizzare come maschera, come questa:

Puoi impostare l'immagine come a background-imagee la maschera come a mask-imagesullo stesso elemento e ottenere qualcosa del genere:

Le maschere hanno molto in comune con gli sfondi in quanto è possibile ridimensionarle, posizionarle e ripeterle e simili, proprio come gli sfondi. Vedere le proprietà correlate di seguito. Ma ecco un'altra cosa interessante delle maschere che condividono con gli sfondi: possono essere gradienti.

Ecco la stessa grafica di sfondo, solo con una linear-gradientmaschera che la copre, che rende la parte superiore trasparente sbiadendo la parte inferiore che non è affatto trasparente:

Funziona perché la parte superiore di linear-gradientè transparent. Avrei pensato che avrebbe funzionato se fosse stato whitecosì lungo quanto lo mask-typeera luminance, ma per me non sembra funzionare in nessun browser.

Parlando di luminancemaschere, questo non sembra funzionare per immagini-come-maschere che sono un formato raster come JPG.webp o PNG per me. Aggiornamento : il lettore Micheal Hall scrive con una demo in cui potrebbe avere qualcosa a che fare con l'utilizzo delle proprietà a mano lunga. Firefox sembra supportare questo concetto se usi solo l'abbreviazione.

Ma le maschere alfa sembrano funzionare bene. Come nella grafica raster che utilizza la trasparenza alfa effettiva. Come questo:

E solo per dimostrare un punto, un'animazione a colori che puoi vedere attraverso la maschera:

La mask-imageproprietà può essere utilizzata anche direttamente all'interno degli elementi SVG. Ad esempio, dai un'occhiata a questa maschera ellittica che ha anche un filtro sfocato:

Sembra che potresti impigliare quella maschera SVG e applicarla ad altri elementi, mask-image: url(#mask);ma non trovo che funzioni davvero. Funziona solo all'interno di SVG e ha il brutto effetto collaterale di cancellare completamente un'immagine se usata al di fuori dell'SVG.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.