w3docs logo

Propriété CSS background-clip

La proprété CSS background-clip spécifie à quelle distence les background-color et background-image doivent être de l'élément. Si l'élément n'au aucun background-image ou background-color, cette propriété aura seulement un effet visuel quand la bordure a des régions transparentes ou des régions partiellement opaque; sinon, la bordure affiche la différence.

Valeur initiale border-box
Appliquée à Tous les éléments. Elle est appliquée aussi à ::first-letter et ::first-line.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.backgroundClip = "content-box";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #example{
      border: 3px solid #666;
      padding: 15px;
      background: #ccc;
      background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-clip</h2>
    <p>On a ici utilisée la valeur "content-box".</p>
    <div id="example">
      <p>L'rrière-plan prolonge au bord de la boîte de contenu.</p>
    </div>
  </body>
</html>

Dans l'exemple suivant, trouvez la différence ente les valeurs "padding-box" et "border-box".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété background-clip</h2>
    <p>Ici la propriété background-clip est définie "border-box" (c'est la valeur initiale).</p>
    <div id="example1">
      <p>L'arrière-plan prolonge derrière la bordure.</p>
    </div>
    <p>Ici la propriété background-clip est définie à "padding-box".</p>
    <div id="example2">
      <p>L'arrière-plan prolonge au bord intérieur de la bordure.</p>
    </div>
    </div>
  </body>
</html>

Dans cet exemple, l'arrière-plan est dessiné dans le texte au premier plan.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété background-clip</h2>
    <p>Ici la background-clip est définie à "text"</p>
    <div id="example">
      <p>L'arrière-plan est dessiné dans le texte au premier plan.</p>
    </div>
  </body>
</html>

Valeurs

Valeur Description
border-box L'arrière-plan apparaît derrière la bordure. C'est la valeur initiale.
padding-box L'arrière-plan apparaît dans la bordure.
content-box L'arrière-plan prolonge au bord de la boîte de contenu.
text L'arrière-plan est dessiné dans le texte au premier plan.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
15.0+ 4.0+
3.6 -moz- 		7.0+ 11.5+
10.1 -o-

Pratiquez vos connaissances

Quelles sont les valeurs que peut prendre la propriété 'background-clip' en CSS ?
Trouvez-vous cela utile?