Clip per maschera - Trucchi CSS

Anonim

La mask-clipproprietà CSS fa parte della specifica CSS Masking Module Level 1 e imposta l'area di pittura della maschera. Taglia letteralmente l'area di sfondo di un elemento e definisce quali aree mostrare attraverso la maschera: bordo, riempimento o riquadro dei contenuti. È un po 'come mettere la cornice su una foto, mostrando solo le parti della foto che non sono coperte dalla cornice. Solo, in questo caso, stiamo impostando ciò che viene ritagliato utilizzando i valori CSS Box Model.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

Funziona come la background-clipproprietà, tranne che ha tre valori aggiuntivi che si applicano agli elementi SVG. Nella seguente demo è possibile modificare l'area di pittura della maschera utilizzando questa proprietà. C'è la stessa immagine sotto per mostrare meglio l'effetto della mascheratura e contrassegnare il bordo e le aree di riempimento:

Sintassi

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Valore iniziale: border-box
  • Si applica a: tutti gli elementi. In SVG, si applica agli elementi contenitore escludendo l' elemento, tutti gli elementi grafici.
  • Ereditato: no
  • Tipo di animazione: discreta

Valori

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: Il contenuto dipinto viene ritagliato sulla casella del bordo. (Valore di default)
  • content-box: Il contenuto dipinto viene ritagliato nella casella del contenuto.
  • fill-box: Il contenuto dipinto viene ritagliato sul riquadro di delimitazione dell'oggetto.
  • margin-box: Il contenuto dipinto viene ritagliato nella casella del margine.
  • padding-box: Il contenuto dipinto viene ritagliato sulla scatola di imbottitura.
  • stroke-box: Il contenuto dipinto viene ritagliato sul 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:
    • La casella di riferimento è posizionata all'origine del sistema di coordinate stabilito dall'attributo viewBox.
    • La dimensione della casella di riferimento è impostata sui valori widthe dell'attributo.heightviewBox
  • no-clip: Il contenuto dipinto non viene ritagliato.
  • initial: Applica l'impostazione predefinita della proprietà, ovvero border-box.
  • inherit: Adotta il mask-clipvalore del genitore.
  • unset: Rimuove la corrente mask-clipdall'elemento.

Appunti

  • Per gli elementi SVG senza casella di layout CSS associata, i valori content-box, padding-boxcalcola in fill-boxe per border-boxe margin-boxcalcola in stroke-box.
  • Per elementi con il contenitore di layout CSS associati, i valori fill-boxcalcolare per content-boxe per stroke-boxe view-boxcalcolare il valore iniziale mask-clipche è border-box.

Utilizzo di più valori

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

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

Demo

Supporto del browser

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

Maggiori informazioni

Articolo del 6 novembre 2016

Ritaglio e mascheramento in CSS

Mojtaba Seyedi