background-clip ti consente di controllare fino a che punto un'immagine o un colore di sfondo si estende oltre il riempimento o il contenuto di un elemento.
.frame ( background-clip: padding-box; )Valori
border-boxè il valore predefinito. Ciò consente allo sfondo di estendersi fino al bordo esterno del bordo dell'elemento.padding-boxritaglia lo sfondo sul bordo esterno dell'imbottitura dell'elemento e non lascia che si estenda nel bordo.content-boxritaglia lo sfondo sul bordo della casella del contenuto.inheritapplica l'background-clipimpostazione del genitore all'elemento selezionato.
Demo
background-clip è spiegato al meglio in azione, quindi abbiamo messo insieme due demo per mostrare come funziona.
Nella prima demo, ogni div ha un paragrafo al suo interno. Il paragrafo è il contenuto del div. Ogni div ha uno sfondo giallo e un bordo azzurro semitrasparente di 5 pixel.
Guarda il clip di sfondo della penna di CSS-Tricks (@ css-tricks) su CodePen.
Per impostazione predefinita, o con background-clip: border-boxset, lo sfondo giallo si estende fino al bordo esterno del bordo. Nota come appare il bordo verde a causa dello sfondo giallo sottostante.
Quando background-clipviene modificato in padding-box, il colore di sfondo si interrompe dove termina il riempimento dell'elemento. Si noti che il bordo è blu perché lo sfondo non è autorizzato a sanguinare nel bordo.
Con background-clip: content-box, il colore di sfondo si applica solo al contenuto del div, in questo caso il singolo elemento del paragrafo. La spaziatura interna e il bordo del div non hanno un colore di sfondo. Ma c'è un piccolo dettaglio che vale la pena menzionare: il colore si estende fino al margine del contenuto. Controlla le differenze tra il primo e il secondo esempio con content-box.
Nel primo content-boxesempio, i margini predefiniti del browser vengono applicati al paragrafo e le clip di sfondo dopo il margine. Nel secondo esempio, il margine è impostato su 0 nel CSS e lo sfondo viene ritagliato sul bordo del testo.
Questo prossimo spettacolo interattivo background-clipcon un'immagine di sfondo. Il contenuto di questa demo è un div vuoto più piccolo.
Vedi l'esempio interattivo con clip di sfondo della penna di Timothy Miller (@tjacobdesign) su CodePen.
Questa demo si applica anche background-size: covere background-repeat: no-repeatoltre a background-clipcontrollare l'immagine di sfondo, che altrimenti si ripeterebbe fino al ritaglio.
Testo
Esiste una versione con prefisso del fornitore che funziona per ritagliare uno sfondo al testo. Affinché funzioni, anche il testo dovrà essere trasparente. Fortunatamente, esiste un'altra proprietà del colore del testo con prefisso del fornitore che può effettivamente sostituire color, rendendola sicura da usare in quanto può avere un fallback:
.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )Firefox, Chrome e Safari lo supportano.
Vedi il
testo Pen Lit di Chris Coyier (@chriscoyier)
su CodePen.
Relazionato
- sfondo-allegato
- colore di sfondo
- immagine di sfondo
- background-origin
- background-position
- ripetizione in background
- dimensione dello sfondo
Più risorse
background-clipnelle specifiche CSS3- clip di sfondo su MDN
- Il CSS Box Model
Supporto browser
Tutto chiaro!
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 3+ | 4+ | 10.5+ | 9+ | 4.1+ | Lavori |