scheda delle lezioni

Manuale di riferimento CSS

proprietà CSS

Corso a scelta

Raccomandazione del corso:

CodeW3C.com Scatola dei tesori

Proprietà mask CSS

Pagina precedente marker-start
Pagina successiva mask-clip

Definizione e uso

mask L'attributo viene utilizzato per nascondere l'elemento attraverso una maschera o la tagliatura dell'immagine (parziale o totale).

mask L'attributo è una abbreviazione dei seguenti attributi:

Esempio

Esempio 1

Creare una maschera di ombreggiatura per l'immagine:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

Prova a te stesso

Esempio 2

Creare diverse maschere di ombreggiatura per l'immagine utilizzando gradienti lineari e radiali:

.mask1 {
  mask: lineare-gradient(nero, trasparente);
}
.mask2 {
  mask: radiale-gradient(circle, nero 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: radiale-gradient(ellisse, nero 50%, rgba(0, 0, 0, 0.5) 50%);
}

Prova a te stesso

Esempio 3

Creare una maschera di ombreggiatura per l'immagine utilizzando l'elemento <mask> di SVG:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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(#svgmask1)"></image>
</svg>

Prova a te stesso

Esempio 4

Creare una maschera di ombreggiatura per l'immagine utilizzando l'elemento <mask> di SVG:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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(#svgmask1)"></image>
</svg>

Prova a te stesso

Sintassi CSS

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Valore dell'attributo

Valore	Descrizione
mask-image	Specificare l'immagine utilizzata come sovrapposizione dell'elemento. Il valore predefinito è none.
mask-mode	Specificare se l'immagine della sovrapposizione deve essere considerata come maschera di luminosità o maschera alpha. Il valore predefinito è match-source.
mask-repeat	Impostare se/come ripetere l'immagine della sovrapposizione. Il valore predefinito è repeat.
mask-position	Impostare la posizione iniziale dell'immagine della sovrapposizione (rispetto all'area di posizione della sovrapposizione). Il valore predefinito è 0% 0%.
mask-clip	Specificare l'area influenzata dall'immagine della sovrapposizione. Il valore predefinito è border-box.
mask-origin	Specificare la posizione iniziale dell'immagine della sovrapposizione (area di posizione della sovrapposizione). Il valore predefinito è border-box.
mask-size	Specificare la dimensione dell'immagine della sovrapposizione. Il valore predefinito è auto.
mask-composite	Specificare l'operazione di composizione utilizzata tra la sovrapposizione corrente e la sovrapposizione inferiore. Il valore predefinito è add.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Eredita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	none match-source repeat 0% 0% border-box border-box auto add
Ereditarietà:	No
Produzione di animazioni:	Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	Modulo di Maschera CSS Livello 1
Sintassi JavaScript:	object.style.mask="url(star.svg)"