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.

/* 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;

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

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;
}

.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.

1. Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.

2. Gecko supported, from version 1.1 to version 1.9.2, corresponding to Firefox 1.0 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

3. In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.

4. Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

5. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll

6. Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.

7. In Firefox 48, it was not activated by default and its support could be activated by setting layout.css.background-clip-text.enabled pref to true.

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