Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

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 boîte de bordure, la boîte de remplissage (padding) ou la boîte de contenu.

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

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'background-clip' dans cette spécification.		 Candidat au statut de recommandation Définition initiale.
CSS Backgrounds and Borders Module Level 4
La définition de 'background-clip' dans cette spécification.		 Brouillon de l'éditeur Ajout de la valeur text.
Valeur initialeborder-box
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi