Dimensione maschera - Trucchi CSS

Anonim

In CSS, la proprietà mask-size specifica la dimensione di un'immagine del livello maschera. In molti modi, funziona in modo molto simile alla background-sizeproprietà.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

La mascheratura consente di visualizzare parti selezionate di un elemento nascondendo il resto. La dimensione della maschera è definita dalla mask-sizeproprietà.

Nella seguente demo puoi giocare con le dimensioni dell'immagine del livello maschera:

Sintassi

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Valore iniziale: auto
  • Si applica a: tutti gli elementi. In SVG, si applica agli elementi contenitore escludendo l' elemento, tutti gli elementi grafici e l' elemento
  • Ereditato: no
  • Tipo di animazione: elenco ripetibile

Questo in pratica sta dicendo che la sintassi accetta un valore di background size ( ) che può essere una o due lunghezze e / o percentuali ( ), impostato su autoo una delle due parole chiave ( covere contain).

  • Quando vengono utilizzati due valori , il primo valore specifica la larghezza dell'immagine maschera e il secondo valore specifica la sua altezza .
  • Quando viene utilizzato un valore che non contiene o non copre, definisce la larghezza dell'immagine maschera e si presume che sia l'altezza auto.

Valori

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Definizioni di valore

  • : Tutta la lunghezza CSS valido e non negativo, come ad esempio px, em, reme %, tra gli altri.
  • : Specifica la dimensione dell'immagine del livello maschera come valore percentuale relativo all'area di posizionamento della maschera, che è impostata dal valore di mask-origin. Per impostazione predefinita, questo valore è border-box, significa che contiene bordi, spaziatura interna e contenuto della scatola.
  • auto: Vengono utilizzate l'altezza e la larghezza intrinseche dell'immagine maschera e, per immagini come gradienti che non hanno dimensioni intrinseche, viene renderizzata alla dimensione dell'area di posizionamento della maschera.
  • contain: Ridimensiona l'immagine della maschera preservandone le proporzioni intrinseche in modo che sia la larghezza che l'altezza possano rientrare nell'area di posizionamento della maschera. Per le immagini come i gradienti che non hanno dimensioni intrinseche, il rendering viene eseguito alla dimensione dell'area di posizionamento della maschera.
  • cover: Ridimensiona l'immagine della maschera preservandone le proporzioni intrinseche in modo che sia la larghezza che l'altezza possano coprire interamente l'area di posizionamento della maschera. Per le immagini come i gradienti che non hanno dimensioni intrinseche, il rendering viene eseguito alla dimensione dell'area di posizionamento della maschera.
  • initial: Applica l'impostazione predefinita della proprietà, ovvero auto.
  • inherit: Adotta il valore della dimensione della maschera del genitore.
  • unset: Rimuove la corrente mask-sizedall'elemento.

Utilizzo di più valori

Questa proprietà può accettare un elenco di valori separati da virgole per le dimensioni della maschera e ogni valore viene applicato a un'immagine del livello maschera corrispondente specificata nella mask-imageproprietà.

Nell'esempio seguente, il primo valore specifica la dimensione della prima immagine, il secondo valore specifica la dimensione della seconda immagine e così via.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

Il autovalore

Se il valore della mask-sizeproprietà è specificato come auto, in questo modo:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

... quindi l'immagine della maschera viene ridimensionata nelle direzioni corrispondenti per mantenere le sue proporzioni. Detto questo, possiamo ottenere vari risultati a seconda delle dimensioni e delle proporzioni intrinseche dell'immagine.

Proporzione / Dimensione Nessuna dimensione intrinseca Una dimensione intrinseca Entrambe le dimensioni intrinseche
Ha proporzione Reso come se fosse stato specificato contenere Resi alla dimensione determinata da quella dimensione e dalla proporzione Resi a quella dimensione
Nessuna proporzione Resi alla dimensione dell'area di posizionamento della maschera Resi utilizzando la dimensione intrinseca e la dimensione corrispondente dell'area di posizionamento della maschera N / A

Se il valore di mask-sizeè specificato con autoe un altro valore non automatico come il seguente:

.element ( mask-size: auto 200px; )

… poi:

  • se l'immagine ha una proporzione intrinseca , il valore auto viene calcolato utilizzando la dimensione specificata e la proporzione intrinseca.
  • se l'immagine non ha proporzioni intrinseche , il valore auto diventa la dimensione intrinseca corrispondente dell'immagine se esiste e, in caso contrario, auto sarà la dimensione corrispondente dell'area di posizionamento della maschera.

Comprensione coverecontain

Il video seguente spiega come funzionano le parole chiave di contenimento e copertina. Notare che la posizione iniziale di un livello maschera è al centro dell'area di posizionamento:

Se l'immagine non ha proporzioni intrinseche, specificando copertura o contiene, l'immagine della maschera viene renderizzata alla dimensione dell'area di posizionamento della maschera.

E cosa diavolo è una dimensione intrinseca e una proporzione intrinseca?

Le dimensioni intrinseche sono la larghezza e l'altezza di un elemento e la proporzione intrinseca è il loro rapporto.

  • Un'immagine bitmap come un formato PNG, ha sempre dimensioni intrinseche e una proporzione intrinseca.
  • Un'immagine vettoriale come un formato SVG, può avere entrambe le dimensioni intrinseche. Pertanto, ha anche una proporzione intrinseca. Può anche avere una o nessuna dimensione intrinseca e, in entrambi i casi, potrebbe o meno avere una proporzione intrinseca.
  • Le sfumature sono come immagini senza dimensioni intrinseche o proporzioni intrinseche.

Supporto del browser

IE Bordo Firefox Cromo Safari musica lirica
No 18+ 53+ Tutti 4+ 70
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
85+ 79+ 4.4+ Tutti Tutti
Fonte: caniuse

Demo

La seguente demo usa una lunghezza per la dimensione della maschera. Prova a cambiare il valore con altri tipi di valori nel codice e controlla il risultato.

Maggiori informazioni

  • Modulo di mascheramento CSS di livello 1
  • Ritaglio e mascheramento in CSS
  • Ritaglio e mascheratura: quando utilizzarli
  • # 185: Giocare con le maschere CSS (video)