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

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

Valori

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:

html<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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Esempio . Posizione della maschera

Maschera a cuore al centro:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

html<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>

css#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:

html<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>

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

Результат:

Vedi anche