Propriété CSS background-clip

La propriété CSS background-clip définit jusqu'où s'étendent la background-color et la background-image à l'intérieur d'un élément — autrement dit, la zone de peinture de l'arrière-plan. Par défaut, l'arrière-plan est peint jusqu'au bord extérieur de la bordure, mais background-clip permet de l'arrêter au bord du padding, au bord du contenu, ou même de le découper selon la forme du texte.

Cette page explique ce que fait chaque valeur, quand l'utiliser, la différence entre background-clip et la propriété connexe background-origin, ainsi qu'un exemple fonctionnel pour chaque valeur.

Si l'élément n'a pas de background-color ni de background-image, cette propriété n'a aucun effet visuel.

La propriété background-clip fait partie des propriétés CSS3.

Quand l'utiliser

Arrière-plans en retrait — utilisez padding-box ou content-box afin qu'une bordure translucide (par exemple une bordure dashed ou dotted) laisse apparaître la page derrière elle plutôt que la couleur d'arrière-plan de l'élément.
Texte avec dégradé ou image — combinez background-clip: text avec une background-image colorée et color: transparent pour remplir les lettres avec un dégradé.
Cartes superposées — associez avec background-origin pour contrôler là où une image de fond commence (origin) par rapport à l'endroit où elle est coupée (clip).

Pour découper un arrière-plan selon le texte, une version préfixée par le fabricant (-webkit-background-clip) est également nécessaire pour la prise en charge dans la plupart des navigateurs (voir la note sur la valeur text ci-dessous).

Valeur initiale	border-box
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Héritage	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.backgroundClip = "content-box";

Syntaxe

Syntaxe de la propriété CSS background-clip

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

Exemple de la propriété background-clip :

Exemple de la propriété CSS background-clip avec la valeur 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>

Essayez vous-même »

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

Exemple de la propriété background-clip avec les valeurs "padding-box" et "border-box" :

Exemple de la propriété CSS background-clip avec la valeur 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>

Essayez vous-même »

La valeur text découpe l'arrière-plan de façon à ce qu'il ne soit visible qu'à travers la forme du texte au premier plan. Pour voir l'arrière-plan à la place de lettres pleines, définissez color: transparent (ou une couleur semi-transparente) afin que le texte lui-même ne masque pas l'arrière-plan. C'est la technique standard pour les titres remplis d'un dégradé.

Compatibilité navigateurs : la valeur text nécessite encore le préfixe -webkit-background-clip: text dans la plupart des navigateurs. Déclarez toujours -webkit-background-clip: text; et background-clip: text; ensemble, comme le fait l'exemple ci-dessous.

Exemple de la propriété background-clip avec la valeur "text" :

Exemple de la propriété CSS background-clip avec la valeur 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>

Essayez vous-même »

background-clip vs background-origin

Ces deux propriétés sont faciles à confondre car elles partagent les mêmes mots-clés de boîte (border-box, padding-box, content-box) :

background-origin définit l'endroit où la zone de positionnement de l'image de fond commence — la boîte de référence pour background-position et un background-size différent de cover.
background-clip définit l'endroit où l'arrière-plan peint est coupé — tout ce qui se trouve en dehors de cette boîte n'est pas affiché.

Un arrière-plan peut donc commencer au bord de la bordure (background-origin: border-box) mais être découpé au bord du contenu (background-clip: content-box), de sorte que la partie sur le padding et la bordure est masquée.

Valeurs

Valeur	Description	Essayer
border-box	L'arrière-plan apparaît derrière la bordure. C'est la valeur par défaut.	Essayer »
padding-box	L'arrière-plan apparaît à l'intérieur de la bordure.	Essayer »
content-box	L'arrière-plan s'étend jusqu'au bord de la boîte de contenu.	Essayer »
text	L'arrière-plan est peint à l'intérieur du texte au premier plan.	Essayer »
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Exercice

Pratique

Laquelle des valeurs suivantes peut être utilisée avec la propriété 'background-clip' en CSS ?

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