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 .

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

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

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

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1.01124.029.0310.53.01
content-box1.0124.049.0510.53.0
text (Oui) -webkit- 6

12 -webkit- 6

15

49.07 Non (Oui) -webkit- 6 (Oui) -webkit- 6
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple4.1 (Oui) (Oui)14.07.112.1 (Oui)
content-box4.1 (Oui) (Oui)14.07.112.1 (Oui)
text ? ? (Oui)49.07 Non (Oui) -webkit- 6 (Oui) -webkit- 6

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

Étiquettes et contributeurs liés au document

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