CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

background-clip: border-box | padding-box | content-box;

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

CODE: CSSpreleva codice
  1. .background-clip-example {
  2.   background: url('https://example.com/image.jpg') no-repeat center center;
  3.   background-clip: padding-box;
  4.   padding: 40px;
  5.   color: white;
  6.   font-size: 22px;
  7.   text-align: center;
  8.   border: 5px solid #fff;
  9.   background-size: cover;
  10. }

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:

Sfondo limitato al'area dell'elemento

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.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies