CSS background-clip
La proprietà CSS background-clip controlla l'area di applicazione dell'immagine di sfondo
La proprietà background-clip
determina l'area dell'elemento su cui l'immagine di sfondo viene applicata. Con il valore border-box
, l'immagine si estende fino ai bordi dell'elemento, incluso il bordo. Con padding-box
, lo sfondo si ferma all'interno del padding. Infine, content-box
limita lo sfondo all'area del contenuto, escludendo il padding e il bordo.
Sintassi
Significato dei valori principali:
-
border-box: l'immagine di sfondo si estende fino ai bordi dell'elemento, compreso il bordo.
-
padding-box: l'immagine di sfondo si estende fino al bordo del padding, ma non oltre il bordo dell'elemento (non include il bordo stesso).
-
content-box: l'immagine di sfondo si estende solo all'interno dell'area del contenuto dell'elemento, non includendo il padding o il bordo.
Esempio proprietà: background-clip
Codice Esempio: background-clip

.background-clip-example {
background: url('https://example.com/image.jpg') no-repeat center center;
background-clip: padding-box;
padding: 40px;
color: white;
font-size: 22px;
text-align: center;
border: 5px solid #fff;
background-size: cover;
}
Contenuto Esempio: background-clip
Esempio di utilizzo di background-clip
In questo esempio, l'immagine di sfondo è limitata all'interno dell'area del contenuto dell'elemento grazie a background-clip: content-box
:
CSS e HTML per l'elemento con sfondo:
<style>
.background-clip-example {
background: url('https://example.com/800x400') no-repeat center center;
background-clip: content-box;
padding: 40px;
color: white;
font-size: 22px;
text-align: center;
border: 5px solid red;
background-size: cover;
}
</style>
<div class="background-clip-example">
Sfondo limitato al'area dell'elemento
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.