Mascheratura CSS
Con la mascheratura CSS crei un livello maschera da posizionare su un elemento per nascondere parzialmente o completamente parti dell'elemento.
La proprietà CSS mask-image
La proprietà CSS mask-imagespecifica un'immagine del livello maschera.
L'immagine del livello maschera può essere un'immagine PNG, un'immagine SVG, un gradiente CSS o un elemento SVG <mask> .
Supporto browser
Nota: la maggior parte dei browser supporta solo parzialmente il mascheramento CSS. Dovrai utilizzare il prefisso -webkit- oltre alla proprietà standard nella maggior parte dei browser.
I numeri nella tabella seguente specificano la prima versione del browser che supporta completamente la proprietà. I numeri seguiti da -webkit- specificano la prima versione che ha funzionato con un prefisso.
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Usa un'immagine come livello maschera
Per utilizzare un'immagine PNG o SVG come livello maschera, utilizza un valore url() per passare l'immagine del livello maschera.
L'immagine della maschera deve avere un'area trasparente o semitrasparente. Il nero indica completamente trasparente.
Ecco l'immagine della maschera (un'immagine PNG) che useremo:
Ecco un'immagine dalle Cinque Terre, in Italia:
Ora applichiamo l'immagine della maschera (l'immagine PNG sopra) come livello della maschera per l'immagine delle Cinque Terre, in Italia:
Esempio
Ecco il codice sorgente:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Esempio spiegato
La mask-imageproprietà specifica l'immagine da utilizzare come livello maschera per un elemento.
La mask-repeatproprietà specifica se o come verrà ripetuta un'immagine maschera. Il no-repeat
valore indica che l'immagine della maschera non verrà ripetuta (l'immagine della maschera verrà mostrata solo una volta).
Un altro esempio
Se omettiamo la mask-repeatproprietà, l'immagine della maschera verrà ripetuta su tutta l'immagine delle Cinque Terre, Italia:
Esempio
Ecco il codice sorgente:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Usa gradienti come livello maschera
I gradienti lineari e radiali CSS possono essere utilizzati anche come immagini di maschera.
Esempi di gradiente lineare
Qui, utilizziamo un gradiente lineare come livello maschera per la nostra immagine. Questo gradiente lineare va dall'alto (nero) al basso (trasparente):
Esempio
Usa un gradiente lineare come livello maschera:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Qui, utilizziamo un gradiente lineare insieme alla mascheratura del testo come livello maschera per la nostra immagine:
Le Cinque Terre sono una zona costiera della Liguria, nel nord-ovest dell'Italia. Si trova nella parte occidentale della provincia della Spezia e comprende cinque frazioni: Monterosso al Mare, Vernazza, Corniglia, Manarola e Riomaggiore.
Le Cinque Terre sono una zona costiera della Liguria, nel nord-ovest dell'Italia. Si trova nella parte occidentale della provincia della Spezia e comprende cinque frazioni: Monterosso al Mare, Vernazza, Corniglia, Manarola e Riomaggiore.
Le Cinque Terre sono una zona costiera della Liguria, nel nord-ovest dell'Italia. Si trova nella parte occidentale della provincia della Spezia e comprende cinque frazioni: Monterosso al Mare, Vernazza, Corniglia, Manarola e Riomaggiore.
Esempio
Usa una sfumatura lineare insieme alla mascheratura del testo come livello maschera:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Esempi di gradiente radiale
Qui, utilizziamo un gradiente radiale (a forma di cerchio) come livello maschera per la nostra immagine:
Esempio
Usa un gradiente radiale come livello maschera (un cerchio):
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
Qui, utilizziamo un gradiente radiale (a forma di ellisse) come livello maschera per la nostra immagine:
Esempio
Usa un altro gradiente radiale come livello maschera (un'ellisse):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
Usa SVG come livello maschera
<mask>L' elemento SVG può essere utilizzato all'interno di una grafica SVG per creare effetti di mascheratura.
Qui, utilizziamo l' <mask>elemento SVG per creare diversi livelli di maschera per la nostra immagine:
Esempio
Un livello maschera SVG (formato come un triangolo):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Esempio
Un livello maschera SVG (formato come una stella):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Esempio
Un livello maschera SVG (formato come cerchi):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
Proprietà di mascheramento CSS
La tabella seguente elenca tutte le proprietà di mascheramento CSS:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |