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 initiale | border-box |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Animable | non |
| Ordre canonique | l'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>#
Exemples
Note : Des exemples d'utilisation de -webkit-background-clip: text se trouvent dans la section Apprendre le Web de MDN.
CSS
p {
border: 5px 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) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | 1.0[1] | 4.0 (2.0)[3] | 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) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 4.1 | 14.0 (14) | 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.