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.

Si aucune image ni couleur 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 .

Valeur initialeborder-box
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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é à la boîte de contenu.
text
L'arrière-plan est limité au texte en premier plan. Cette valeur est uniquement utilisable avec la propriété préfixée en -webkit-.

Syntaxe formelle

<box>#


<box> = border-box | padding-box | content-box

Exemples

Note : Des exemples d'utilisation de -webkit-background-clip: text se trouvent dans la section Apprendre le Web de MDN.

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

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>

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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0[1] 4.0 (2.0)[3] (Oui) 9.0[5] 10.5 3.0 (522)[1]
content-box 1.0[1] 4.0 (2.0)[3] ? 9.0[5] (Oui) 3.0 (522)[1]
text (Oui)-webkit[2] 49.0 (49.0)[4] ? Pas de support (Oui)-webkit[2] (Oui)-webkit[2]
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Basic support 4.1 14.0 (14) (Oui) 7.1 12.1 (Oui)
content-box 4.1 14.0 (14) ? 7.1 12.1 (Oui)
text ? 49.0 (49.0)[4] ? Pas de support ? ?

[1] Webkit supporte également une version préfixée de la propriété qui gère les synonymes suivants padding, border et content en plus des mots-clés définis ici.

[2] Selon ce billet (en anglais), WebKit n'inclut pas les décorations de texte ou les ombres dans la découpe.

[3] Gecko utilisait une différente syntaxe entre les versions 1.1 à 1.9.2 (Firefox 1.0 à 3.6) avec un préfixe : -moz-background-clip: padding | border.

[4] Gecko prend désormais en charge la version préfixée avec -webkit pour assurer une compatibilité avec les autres navigateurs. Il prend également en charge la valeur text avec la version non-préfixée background-clip via la préférence layout.css.background-clip-text.enabled qui n'est pas activée par défaut dans Firefox 48. Selon ce billet (en anglais), Gecko n'inclut pas les décorations de texte ou les ombres dans la découpe

[5] Pris en charge par Internet Explorer 7 mais pour les anciennes versions, cela se comportait comme background-clip:padding si overflow: hidden | auto | scroll.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, FredB, Mgjbot, Kyodev, Fredchat
 Dernière mise à jour par : SphinxKnight,