103 of 313 menu

Proprietà mask

La proprietà mask è una proprietà abbreviata per tutte le proprietà di mascheratura e permette di definire: un'immagine maschera, la sua posizione, dimensione, modalità di fusione e altri parametri.

È una proprietà abbreviata per le seguenti proprietà: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintassi

selettore {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Valori

Valore	Descrizione
`none`	Disabilita la mascheratura (valore predefinito)
`url()`	Percorso dell'immagine maschera (SVG, PNG)
`linear-gradient()`	Gradiente lineare come maschera
`radial-gradient()`	Gradiente radiale come maschera
`position`	Posizione della maschera (top, center, 50% 50% ecc.)
`size`	Dimensione della maschera (cover, contain, 100px 50px)
`repeat`	Ripetizione della maschera (no-repeat, repeat-x, space)
`mode`	Modalità di fusione (alpha, luminance, match-source)
`composite`	Composizione delle maschere (add, subtract, intersect, exclude)

Preparazione delle immagini

Supponiamo di avere un'immagine di natura che ritaglieremo, e immagini SVG di un cuore e una freccia, che useremo per ritagliare:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

Esempio . Maschera immagine

Applichiamo la maschera a forma di cuore alla nostra immagine:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url("heart.svg") center/300px no-repeat;
}

:

Esempio . Posizione della maschera

Maschera a cuore nell'angolo in alto a sinistra:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left top/150px no-repeat;
}

:

Esempio . Posizione della maschera

Maschera a cuore nell'angolo in basso a destra:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") right bottom/150px no-repeat;
}

:

Esempio . Posizione della maschera

Maschera a cuore al centro a sinistra:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center/150px no-repeat;
}

:

Esempio . Posizione della maschera

Maschera a cuore al centro:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
}

:

Esempio . Posizione della maschera

Maschera a cuore a 100px da sinistra e 200px dall'alto:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") 100px 200px /150px no-repeat;
}

:

Esempio . Dimensione della maschera cover

Il valore cover ridimensiona la maschera in modo che copra completamente l'elemento, mantenendo le proporzioni. Può ritagliare i bordi della maschera se le proporzioni non coincidono:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

Esempio . Dimensione della maschera contain

Il valore contain ridimensiona la maschera in modo che si adatti completamente all'interno dell'elemento, mantenendo le proporzioni. Può lasciare aree vuote:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/contain no-repeat;
}

:

Esempio . Dimensione della maschera

Una dimensione fissa imposta le dimensioni esatte della maschera. Ad esempio, creiamo una maschera di dimensione 50px:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/50px no-repeat;
}

:

Esempio . Ripetizione no-repeat

Il valore no-repeat disabilita la ripetizione della maschera. La maschera viene visualizzata solo una volta nella posizione specificata:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") top left / 150px no-repeat;
}

:

Esempio . Ripetizione repeat-x

Il valore repeat-x ripete la maschera solo lungo l'asse orizzontale:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

Esempio . Composizione add

Il valore add somma più maschere (il risultato è l'unione di tutte le maschere):

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 200px 30px / 150px no-repeat;
	mask-composite: add;
}

:

Esempio . Composizione intersect

Il valore intersect mostra solo l'area di intersezione delle maschere:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: intersect;
}

:

Esempio . Composizione exclude

Il valore exclude mostra le aree delle maschere che non si intersecano:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: exclude;
}

:

Esempio . Composizione subtract

Il valore subtract sottrae la seconda maschera dalla prima. Ad esempio, creiamo un cuore e sottraiamo da esso una freccia:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

Esempio . Notazione estesa di mask

La proprietà mask, scritta con le sue singole componenti:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

Esempio . SVG per un'immagine

Utilizzo di un elemento SVG come maschera per un'immagine:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url(#mask);
}

:

Esempio . SVG per un gradiente

Utilizzo di un elemento SVG come maschera per un gradiente:

<div id="elem"></div>
<svg width="0" height="0">
	<mask id="star-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

Vedi anche

proprietà mask-position,
definisce la posizione della maschera relativamente all'elemento
proprietà mask-image,
imposta l'immagine per la maschera
proprietà mask-mode,
definisce come la maschera interagisce con lo sfondo
proprietà mask-size,
definisce la dimensione della maschera
proprietà mask-repeat,
definisce la ripetizione della maschera
proprietà mask-origin,
definisce l'area di posizionamento della maschera
proprietà mask-clip,
definisce l'area di ritaglio della maschera
proprietà mask-composite,
definisce come multiple maschere si combinano

↑

Italiano▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Indonesia 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Polski Português Română Русский සිංහල Slovenčina Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Utilizziamo i cookie per il funzionamento del sito, l'analisi e la personalizzazione. I dati vengono elaborati in conformità con la Politica sulla privacy.

accetta tutto personalizza rifiuta