background-clip

La propriété background-clip définit la façon dont l'arrière-plan d'un élément (que ce soit l'image ou la couleur) s'étend sous la bordure.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Si aucune image (background-image) ni couleur (background-color) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via border-style ou border-image). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .

Syntaxe

/* Valeurs utilisant un mot-clé */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Valeurs globales */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

Valeurs

border-box

L'arrière-plan s'étend jusqu'à la limite externe de la bordure. L'arrière-plan sera situé sous la bordure en termes d'ordre z.

padding-box

Aucun arrière-plan n'est dessiné dans la boîte de bordure. L'arrière-plan s'étend jusqu'à la limite de la boîte de remplissage (padding).

content-box

L'arrière-plan est limité (rogné) à la boîte de contenu.

text

L'arrière-plan est limité (rogné) au texte en premier plan.

Syntaxe formelle

<box>#
où 
<box> = border-box | padding-box | content-box

Exemples

CSS

p {
 border: 10px navy;
 border-style: dotted double;
 margin: 1em;
 padding: 2em;
 background: #F8D575;
 font: 900 1.2em sans-serif;
 text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}

.padding-box {
  background-clip: padding-box;
}

.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  color: rgba(0,0,0,.2);
}

HTML

<p class="border-box">
  L'arrière-plan s'étend sous la bordure.
</p>
<p class="padding-box">
  L'arrière-plan s'étend jusqu'avant la 
  bordure.
</p>
<p class="content-box">
  L'arrière-plan s'arrête à la boîte de
  contenu.
</p>
<p class="text">
  L'arrière-plan se limite au texte au
  premier-plan.
</p>

Résultat

Spécifications

Compatibilité des navigateurs

Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub https://github.com/mdn/browser-compat-data, n'hésitez pas à contribuer en proposant vospull request.

Voir aussi

• clip-path
• Les propriétés relatives à l'arrière-plan :
  • background
  • background-color
  • background-image
• Le modèle de boîtes CSS