Mascheramento in CSS

A volte quando si aggiungono immagini a un sito Web, è necessario per sfuggire, nascondersi, illuminare o concentrare alcune parti di una particolare immagine. CSS ti fa fare con grande facilità e si riferisce a questa procedura come mascheramento.

Mascherare significa nascondere o tagliare le immagini che appaiono su siti Web in punti particolari utilizzando la proprietà Mask-Image CSS. In questo articolo, discuteremo di come viene eseguito il mascheramento in vari modi usando la proprietà dell'immagine maschera.

Cominciamo.

Proprietà della maschera

La proprietà della maschera-immagine nasconde completamente o parzialmente parti di immagini usando diversi livelli di opacità. Un altro scopo di questa proprietà è quello di stratificare un'immagine come maschera su un'altra.

Sintassi

Maschera-immagine: nessuna | Immagine | url | iniziale | ereditare;

I parametri sono spiegati di seguito.

nessuno: Questo è un valore predefinito.

Immagine: Questo valore rende un'immagine che verrà utilizzata come livello di maschera.

URL: Questo valore assume un'immagine o un elemento SVG sotto forma di un riferimento URL.

Comprendiamo il mascheramento in CSS usando vari esempi.

Esempio 1

Nell'esempio seguente mascheremo un logo su un'altra immagine.

Html

Prima di mascherare

Dopo il mascheramento

CSS

div img
larghezza: 250px;
Altezza: 250px;

.mascheramento
larghezza: 300px;
Altezza: 300px;
Background-color: nero;
-WebKit-Mask-Box-Image: URL (logo.png);

Produzione

Le immagini sono state mascherate dal successo.

Esempio 2

Puoi anche usare i gradienti per mascherare le immagini. Di seguito ti abbiamo presentato un esempio in cui abbiamo creato un'ellisse come maschera sull'immagine usando il mascheramento.

Html

Abbiamo semplicemente aggiunto un'immagine usando il tag.

CSS

div img
larghezza: 250px;
Altezza: 250px;

.mascheramento
larghezza: 300px;
Altezza: 300px;
-WebKit-Mask-Box-Image: gradiente radiale (Ellisse 60% 30% al 50% 50%, Grey 60%, RGBA (146, 140, 140, 0.3) 40%);
Bordo: 3px Black solido;

Nel codice sopra, stiamo usando la funzione del gradiente radiale per mascherare un livello su un'immagine sotto forma di un'ellisse con una dimensione del 60% in alto e in basso e il 30% a destra e a sinistra. Nel frattempo le posizioni di partenza di tutti i lati sono fissate al 50% per mantenere la forma di Ellisse al centro. Inoltre, gli abbiamo anche dato un colore iniziale e anche un colore finale.

Produzione

Un livello di maschera è stato aggiunto con successo all'immagine sotto forma di un'ellisse.

Esempio 3

Supponiamo di voler mascherare uno strato sotto forma di un cerchio usando gradienti. Ecco il codice di esempio.

CSS

div img
larghezza: 200px;
Altezza: 200px;

.mascheramento
larghezza: 250px;
Altezza: 250px;
-WebKit-Mask-Box-Image: gradiente radiale (cerchio al 50%50%, grigio 60%, RGBA (146, 140, 140, 0.3) 60%);
Bordo: 3px Black solido;

Per formare un cerchio al centro lo abbiamo assegnato una posizione del 50% a tutti i lati con i colori di partenza e finale.

Produzione

Un cerchio mascherato è stato creato con successo.

Conclusione

Mascherare significa nascondere o tagliare le immagini che appaiono su siti Web in punti particolari utilizzando la proprietà Mask-Image CSS. La proprietà dell'immagine maschera esegue questo compito assegnando diversi livelli di opacità a parti di immagini, inoltre, può mascherare un'immagine su un'altra. È utile quando si desidera sfociare, nascondere, illuminare o concentrare alcune parti di una particolare immagine. In questo post, abbiamo discusso di come viene eseguito il mascheramento in CSS insieme a esempi pertinenti.