Posizione maschera - Trucchi CSS

Anonim

In CSS, la mask-positionproprietà specifica la posizione iniziale di un'immagine del livello maschera rispetto all'area di posizione della maschera. Funziona come la background-positionproprietà.

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

La mascheratura consente di visualizzare parti selezionate di un elemento nascondendo il resto. Nella seguente demo è possibile modificare la posizione dell'immagine del livello maschera:

Sintassi

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Valore iniziale: 0% 0%
  • 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
  • Valore calcolato: composto da: due parole chiave che rappresentano l'origine e due offset da tale origine, ciascuno dato come lunghezza assoluta (se data a ), altrimenti come percentuale.
  • Tipo di animazione: elenco ripetibile

Valori

A può essere specificata in termini di parole chiave di offset ( top, left, bottom, right, e center), percentuali e valori di lunghezza riguardanti i bordi dell'elemento, simile al CSS background-positionstruttura.

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

Definizioni di valore

  • : Qualsiasi lunghezza CSS valido (ad esempio px, em, reme %, tra gli altri) che specificano quanto il bordo dell'immagine maschera è dal bordo corrispondente dell'elemento.
  • : Specifica la posizione dell'immagine del livello maschera come valore percentuale rispetto all'area di posizionamento della maschera meno le dimensioni dell'immagine maschera.
  • top: Equivalente allo 0% per la posizione verticale.
  • right: Equivalente al 100% per la posizione orizzontale.
  • bottom: Equivalente al 100% per la posizione verticale.
  • left: Equivalente allo 0% per la posizione orizzontale.
  • center: Equivalente al 50% per la posizione orizzontale se la posizione orizzontale non è specificata altrimenti, o al 50% per la posizione verticale, se lo è.
  • initial: Applica l'impostazione predefinita della proprietà, che è 0% 0%.
  • inherit: Adotta il mask-positionvalore del genitore.
  • unset: Rimuove la corrente mask-positiondall'elemento.

Utilizzo di più valori

Questa proprietà può accettare un elenco di valori separati da virgole per le posizioni 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 posizione della prima immagine, il secondo valore specifica la posizione della seconda immagine e così via.

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

Sintassi diversa

mask-position può richiedere uno, due, tre o quattro valori per specificare la posizione del livello maschera orizzontalmente e verticalmente.

Valore unico

Nel caso in cui venga impostato un singolo valore , questo viene preso come valore orizzontale e si assume che sia il valore verticale center.

mask-position: 100px; /* 100px center */
Due valori

In caso di utilizzo di valori di coppia, il primo viene preso come valore orizzontale e il secondo specifica la posizione del livello di creazione verticalmente.

mask-position: 10% 50%; /* x=10%, Y=50% */

Se entrambi i valori sono parole chiave, l'ordine delle parole chiave è irrilevante:

mask-position: top left; /* = left top */

Ma quando abbiamo una combinazione di parola chiave e lunghezza o percentuale, l'ordine è importante e il primo valore corrisponde sempre all'offset orizzontale. Perciò:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Tre valori

Se vengono forniti tre valori, si presume che l'offset mancante sia zero:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Quattro valori

Una sintassi a quattro valori consente di specificare a quali lati dell'elemento si sta posizionando la maschera (valori 1 e 3) e quindi la distanza da quei lati (valori 2 e 4).

Quindi, se vuoi posizionare la maschera a 100px dalla parte inferiore dell'elemento e 200px da destra, puoi fare come segue:

mask-position: bottom 100px right 200px;

Maschere animate

È possibile animare la posizione della maschera e mask-sizeutilizzare l'animazione dei fotogrammi chiave e la transizione CSS, come segue:

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

In questa prossima demo, animeremo la posizione del livello maschera usando l'animazione del fotogramma chiave:

Demo

Modificare il valore per mask-positionnella seguente demo:

Supporto del browser

IE Bordo Firefox Cromo Safari musica lirica
No 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Fonte: caniuse

Maggiori informazioni

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