Proprietà CSS background-clip

La proprietà CSS background-clip definisce fino a dove si estendono il background-color e il background-image all'interno di un elemento — ovvero l'area di disegno dello sfondo. Per impostazione predefinita lo sfondo viene disegnato fino al bordo esterno del bordo, ma background-clip permette di fermarlo al bordo del padding, al bordo del contenuto, o addirittura di ritagliarlo alla forma del testo.

Questa pagina illustra cosa fa ciascun valore, quando utilizzarlo, la differenza tra background-clip e la proprietà correlata background-origin, e un esempio funzionante per ogni valore.

Se l'elemento non ha background-color né background-image, questa proprietà non ha alcun effetto visivo.

La proprietà background-clip è una delle proprietà CSS3.

Quando utilizzarla

Sfondi interni — usa padding-box o content-box affinché un bordo traslucido (ad esempio un bordo dashed o dotted) mostri la pagina sottostante invece del colore di sfondo dell'elemento.
Testo con gradiente o immagine — combina background-clip: text con un background-image colorato e color: transparent per riempire le lettere con un gradiente.
Card a strati — abbina background-origin per controllare dove un'immagine di sfondo inizia (origin) rispetto a dove viene ritagliata (clip).

Per ritagliare lo sfondo al testo, è necessaria anche una versione con prefisso del vendor (-webkit-background-clip) per il supporto nella maggior parte dei browser (vedi la nota sul valore text qui sotto).

Valore iniziale	border-box
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter e ::first-line.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.backgroundClip = "content-box";

Sintassi

Sintassi della proprietà CSS background-clip

background-clip: border-box | padding-box | content-box | text | initial | inherit;

Esempio della proprietà background-clip:

Esempio della proprietà CSS background-clip con il valore content-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        border: 3px solid #666;
        padding: 15px;
        background: #ccc;
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the "content-box" value is used.</p>
    <div id="example">
      <p>The background extends to the edge of the content box.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Nell'esempio seguente puoi notare la differenza tra i valori "padding-box" e "border-box".

Esempio della proprietà background-clip con i valori "padding-box" e "border-box":

Esempio della proprietà CSS background-clip con il valore border-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {
        border: 5px dashed #666;
        padding: 15px;
        background: #1c87c9;
        background-clip: border-box;
      }
      #example2 {
        border: 5px dashed #666;
        padding: 15px;
        background: #1c87c9;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the background-clip is set to "border-box" (this is the default value).</p>
    <div id="example1">
      <p>The background extends behind the border.</p>
    </div>
    <p>Here the background-clip is set to "padding-box".</p>
    <div id="example2">
      <p>The background extends to the inside edge of the border.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Il valore text ritaglia lo sfondo in modo che sia visibile solo attraverso la forma del testo in primo piano. Per vedere lo sfondo al posto delle lettere solide, imposta color: transparent (o un colore semi-trasparente) in modo che il testo stesso non copra lo sfondo. Questa è la tecnica standard per i titoli riempiti con un gradiente.

Supporto browser: il valore text richiede ancora il prefisso -webkit-background-clip: text nella maggior parte dei browser. Dichiara sempre insieme sia -webkit-background-clip: text; che background-clip: text;, come fa l'esempio qui sotto.

Esempio della proprietà background-clip con il valore "text":

Esempio della proprietà CSS background-clip con il valore text

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        border: 3px dashed #1ebf42;
        padding: 15px;
        background: #1c87c9;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the background-clip is set to "text"</p>
    <div id="example">
      <p>The background is painted within the foreground text.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

background-clip vs background-origin

Queste due proprietà si confondono facilmente perché condividono le stesse parole chiave di box (border-box, padding-box, content-box):

background-origin imposta dove l'area di posizionamento dell'immagine di sfondo inizia — il box di riferimento per background-position e un background-size non impostato su cover.
background-clip imposta dove lo sfondo disegnato viene tagliato — tutto ciò che si trova al di fuori di questo box non viene mostrato.

Lo sfondo può quindi iniziare dal bordo esterno (background-origin: border-box) ma essere ritagliato al bordo del contenuto (background-clip: content-box), cosicché la parte sopra il padding e il bordo è nascosta.

Valori

Valore	Descrizione	Prova
border-box	Lo sfondo appare dietro il bordo. Questo è il valore predefinito.	Prova »
padding-box	Lo sfondo appare all'interno del bordo.	Prova »
content-box	Lo sfondo si estende fino al bordo del box del contenuto.	Prova »
text	Lo sfondo viene disegnato all'interno del testo in primo piano.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento genitore.

Esercitati

Pratica

Quali dei seguenti valori possono essere usati con la proprieta 'background-clip' in CSS?

'padding-box''content-box''border-box''shadow-box'