Proprietà CSS mask-position
Esempio
Imposta la posizione dell'immagine del livello maschera al centro:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La mask-positionproprietà imposta la posizione iniziale di un'immagine della maschera (rispetto all'area della posizione della maschera).
Suggerimento: per impostazione predefinita, un'immagine maschera viene posizionata nell'angolo superiore sinistro di un elemento e ripetuta sia verticalmente che orizzontalmente.
| Valore di default: | 0% 0% |
|---|---|
| Ereditato: | no |
| Animabile: | no. Leggi su animabile |
| Versione: | CSS3 |
| sintassi JavaScript: | oggetto .style.maskPosition="100px centro" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit- specificano la prima versione che ha funzionato con un prefisso.
| Property | |||||
|---|---|---|---|---|---|
| mask-position | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Sintassi CSS
mask-position: value;
Valori di proprietà
| Value | Description |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
If you only specify one keyword, the other value will be "center" |
| x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% |
| xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Imposta la posizione dell'immagine del livello maschera nell'angolo in basso a destra:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 100% 100%;
mask-position: 100% 100%;
}
Pagine correlate
Riferimento CSS: proprietà mask-image
Riferimento CSS: proprietà in modalità maschera
Riferimento CSS: proprietà mask-origin
Riferimento CSS: proprietà mask-repeat
Riferimento CSS: proprietà mask-size
Tutorial CSS: Mascheratura CSS