Sovrapposizioni CSS

Utilizzando la maschera CSS, è possibile creare uno strato di maschera e posizionarlo sull'elemento per nascondere parzialmente o completamente alcune parti dell'elemento.

proprietà mask-image

CSS mask-image l'attributo specifica l'immagine di maschera.

L'immagine di maschera può essere un'immagine PNG, un'immagine SVG,Gradiente CSS o Elemento <mask> di SVG.

Supporto del browser

I numeri nella tabella sottostante rappresentano la prima versione del browser che supporta completamente l'attributo.

con -webkit- Il numero prefisso rappresenta la prima versione che supporta il prefisso.

Utilizzo dell'immagine come strato di maschera

Per utilizzare un'immagine PNG o SVG come strato di maschera, utilizzare url() Passaggio dell'immagine di maschera al livello di maschera.

L'immagine di maschera deve avere aree trasparenti o semi-trasparenti. Il nero rappresenta la trasparenza completa.

Questa è l'immagine di maschera che utilizzeremo (immagine PNG):

Questa è l'immagine proveniente dal Cinque Terre italiano:

Ora, applicheremo l'immagine di maschera (l'immagine PNG superiore) come strato di maschera per l'immagine del Cinque Terre italiano:

Esempio

Di seguito è riportato il codice sorgente:

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

Prova da solo

Esempio di spiegazione

mask-image L'attributo specifica l'immagine utilizzata come maschera dell'elemento.

mask-repeat L'attributo specifica se l'immagine di maschera deve essere ripetuta o come deve essere ripetuta. Il valore no-repeat indica che l'immagine di maschera non viene ripetuta (l'immagine di maschera viene visualizzata una sola volta).

un altro esempio

Se omittiamo mask-repeat L'attributo, se l'immagine di maschera viene ripetuta in tutta l'immagine di Wuyue:

Esempio

Di seguito è riportato il codice sorgente:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

Prova da solo

Utilizzando la progressione come maschera di copertura

Le progressioni lineari e radiali CSS possono anche essere utilizzate come immagini di maschera.

Esempio di progressione lineare

Qui utilizziamo la progressione lineare come maschera di copertura dell'immagine. Questa progressione lineare va dal alto (nero) al basso (trasparente):

Esempio

Utilizzando la progressione lineare come maschera di copertura:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

Prova da solo

Qui utilizziamo la progressione lineare e la maschera di testo come maschera di copertura dell'immagine:

Esempio

Utilizzando la progressione lineare e la maschera di testo come maschera di copertura:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Prova da solo

Esempio di progressione radiale

Qui utilizziamo la progressione radiale (forma circolare) come maschera di copertura dell'immagine:

Esempio

Utilizzando la progressione radiale come maschera di copertura (circolare):

.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%);
}

Prova da solo

In questo esempio, utilizziamo un gradiente radiale (a forma di ellisse) come ombreggiatura dell'immagine:

Esempio

Utilizzare un altro gradiente radiale come ombreggiatura (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) 50%);
}

Prova da solo

Utilizzo di SVG come ombreggiatura

L'elemento <mask> di SVG può essere utilizzato all'interno di un grafico SVG per creare effetti di ombreggiatura.

In questo esempio, utilizziamo l'elemento <mask> di SVG per creare diverse ombreggiature per l'immagine:

Esempio

Un'ombreggia SVG a forma di 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="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Prova da solo

Esempio

Un'ombreggia SVG a forma di 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="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Prova da solo

Esempio

Un'ombreggia SVG a forma circolare:

<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="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Prova da solo