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


<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
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
background-clipChrome Support complet 1
Support complet 1
Support complet 1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Chrome 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.
Edge Support complet 12Firefox Support complet 4
Support complet 4
Support complet 49
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Firefox 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.
Aucun support 1 — 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Used the -moz-background-clip: padding | border syntax.
IE Support complet 9
Notes
Support complet 9
Notes
Notes In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.
Opera Support complet 10.5
Support complet 10.5
Support complet 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Opera 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.
Safari Support complet 3
Préfixée Notes
Support complet 3
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Safari 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.
WebView Android Support complet 4.1
Support complet 4.1
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes WebView 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.
Chrome Android Support complet 18
Support complet 18
Support complet 18
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Chrome 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.
Firefox Android Support complet 14
Support complet 14
Support complet 49
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Firefox 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.
Opera Android Support complet 11
Support complet 11
Support complet 14
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Opera 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.
Safari iOS Support complet 1
Préfixée Notes
Support complet 1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Safari 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.
Samsung Internet Android Support complet 1.0
content-boxChrome Support complet 1Edge Support complet 12Firefox Support complet 4IE Support complet 9
Notes
Support complet 9
Notes
Notes In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll
Opera Support complet 10.5Safari Support complet 3WebView Android Support complet 4.1Chrome Android Support complet 18Firefox Android Support complet 14Opera Android Support complet 11Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
text
Expérimentale
Chrome Support partiel 3
Notes
Support partiel 3
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Edge Support complet 15
Support complet 15
Support partiel 12
Notes
Notes Before Edge 15, this value was supported with the prefixed version of the property only.
Firefox Support complet 49
Support complet 49
Support complet 48
Désactivée
Désactivée From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support partiel 15
Notes
Support partiel 15
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari Support partiel 4
Notes
Support partiel 4
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
WebView Android Support partiel 1
Notes
Support partiel 1
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Chrome Android Support partiel 18
Notes
Support partiel 18
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Firefox Android Support complet 49
Support complet 49
Support complet 48
Désactivée
Désactivée From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support partiel 14
Notes
Support partiel 14
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari iOS Support partiel 3.2
Notes
Support partiel 3.2
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.
Samsung Internet Android Support partiel 1.0
Notes
Support partiel 1.0
Notes
Notes This value is supported with the prefixed version of the property only.
Notes According to the WebKit blog, text decorations or shadows are not included in the clipping.

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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