Maschera-origine - Trucchi CSS

La mask-originspecifica l'area della posizione maschera di un'immagine di livello maschera. In altre parole, definisce dove si trova l'origine dell'immagine del livello maschera, sia che si tratti del bordo del bordo, del riempimento o della casella del contenuto.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Per gli elementi renderizzati come una singola casella, mask-originspecifica l'area di posizionamento della maschera. Per gli elementi resi come più riquadri (ad esempio, riquadri in linea su più righe, riquadri su più pagine) la proprietà specifica su quali riquadri box-decoration-breakopera per determinare l'area di posizionamento della maschera.

Questa proprietà funziona come la background-originproprietà, tranne per il fatto che ha un valore iniziale diverso e tre valori aggiuntivi che si applicano agli elementi SVG.

Nella seguente demo è possibile modificare l'origine dell'immagine del livello maschera. C'è la stessa immagine sotto per mostrare meglio l'effetto della mascheratura e contrassegnare il bordo e le aree di riempimento:

Sintassi

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Valore iniziale: border-box
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: discreta

Valori

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Definizioni di valore

content-box: La posizione è relativa alla casella del contenuto. L'origine del mask-imageè posizionata nell'angolo superiore sinistro del bordo del contenuto.
padding-box: La posizione è relativa al riquadro di riempimento. L'origine dell'immagine della maschera in 0 0è posizionata nell'angolo superiore sinistro del bordo di riempimento, 100% 100%è l'angolo inferiore destro.
border-box: Il valore predefinito, che imposta la posizione rispetto alla casella del bordo.
margin-box: La posizione è relativa alla casella del margine
fill-box: La posizione è relativa al riquadro di delimitazione dell'oggetto
stroke-box: La posizione è relativa al riquadro di delimitazione del tratto
view-box: Utilizza la finestra SVG più vicina come riquadro di riferimento. Se viewBoxviene specificato un attributo per l'elemento di creazione della vista SVG, il riquadro di riferimento viene posizionato all'origine del sistema di coordinate stabilito dall'attributo viewBoxe la dimensione del riquadro di riferimento viene impostato sui valori widthe dell'attributo.heightviewBox
initial: Applica l'impostazione predefinita della proprietà, ovveroborder-box
inherit: Adotta il mask-originvalore del genitore.
unset: Rimuove la corrente mask-origindall'elemento.

Utilizzo di più valori

Questa proprietà può accettare un elenco di valori separati da virgole per le origini della maschera, in cui ogni valore viene applicato a un'immagine del livello maschera corrispondente specificata nella mask-imageproprietà. Nell'esempio seguente, il primo valore specifica l'origine della prima immagine, il secondo valore specifica l'origine della seconda immagine e così via.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Appunti

Per gli elementi SVG senza dialogo associata layout CSS, i valori content-box, padding-boxe border-boxdi calcolo a fill-box.
Per elementi con il contenitore associata CSS disposizione, i valori fill-box, stroke-boxe view-boxcalcolare al initialvalore mask-origin, che è border-box.

Demo

Quando abbiamo l'immagine del livello maschera ripetuta, la prima istanza viene posizionata nell'angolo in alto a sinistra dell'area di posizionamento specificata, quindi viene ripetuta a partire da lì in base al valore della mask-repeatproprietà.

Modificare il valore per mask-originnella seguente demo per avere un'idea migliore di ciò che sta accadendo: