background-clip

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriétéCSSbackground-clip définit si l'arrière-plan d'un élément s'étend sous son cadre de bordure, son cadre de remplissage ou son cadre de contenu.

Exemple interactif

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text;color: transparent;

<section>  <div>Ceci est le contenu de l'élément.</div></section>

#example-element {  background-image: url("/shared-assets/images/examples/leopard.jpg");  color: white;  text-shadow: 2px 2px black;  padding: 20px;  border: 10px dashed #333333;  font-size: 2em;  font-weight: bold;}

Syntaxe

css

/* Valeurs avec un mot-clé */background-clip: border-box;background-clip: padding-box;background-clip: content-box;background-clip: text;background-clip: border-area;/* Valeurs globales */background-clip: inherit;background-clip: initial;background-clip: revert;background-clip: revert-layer;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.
border-areaNon standard: L'arrière-plan est peint à l'intérieur (rogné à) de la zone peinte par la bordure, en tenant compte deborder-width etborder-style, mais en ignorant toute transparence introduite parborder-color.

L'arrière-plan est toujours dessiné derrière la bordure, doncbackground-clip: border-box n'a un effet visuel que si la bordure est partiellement opaque ou comporte des zones transparentes ou partiellement opaques. De plus, la propriétébackground-clip: text a peu ou pas d'effet visuel si le texte est totalement ou partiellement opaque.

Note :Comme l'élément racine possède une zone de peinture d'arrière-plan différente, la propriétébackground-clip n'a aucun effet lorsqu'elle est appliquée sur celui-ci. Voir « Les arrière-plans des éléments spéciaux^(angl.) »

Note :Pour les documents dontl'élément racine est un élément HTML : si la valeur calculée debackground-image sur l'élément racine estnone et que sabackground-color esttransparent, les agents utilisateur doivent alors propager les valeurs calculées des propriétésbackground depuis le premier enfant HTML<body> de cet élément. Les valeurs utilisées pour les propriétésbackground de cet élément<body> sont leurs valeurs initiales, et les valeurs propagées sont traitées comme si elles étaient définies sur l'élément racine. Il est recommandé que les auteur·ice·s de documents HTML définissent l'arrière-plan du canevas pour l'élément<body> plutôt que pour l'élément HTML.

Accessibilité

Lorsque vous utilisezbackground-clip: text, vérifiez que le contraste entre la couleur d'arrière-plan et la couleur du texte placé dessus est suffisamment élevé pour que les personnes en situation de basse vision puissent lire le contenu de la page.

Si l'image d'arrière-plan ne se charge pas, cela peut aussi rendre le texte illisible. Ajoutez une couleur d'arrière-plan de secours avecbackground-color pour éviter ce problème, et testez sans l'image.

Pensez à utiliser des requêtes de fonctionnalités avec@supports pour tester la prise en charge debackground-clip: text et fournir une alternative accessible si ce n'est pas pris en charge.

Définition formelle

Valeur initiale	`border-box`
Applicabilité	tous les éléments. S'applique aussi à`::first-letter` et`::first-line`.
Héritée	non
Valeur calculée	comme défini
Type d'animation	une liste répétable

Syntaxe formelle

background-clip =
<bg-clip>#

<bg-clip> =
<visual-box>|
[border-area||text]

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

Exemples

HTML

html

<p>L'arrière-plan s'étend sous la bordure.</p><p>L'arrière-plan s'étend jusqu'avant la bordure.</p><p>L'arrière-plan s'arrête à la boîte de contenu.</p><p>L'arrière-plan se limite au texte au premier-plan.</p><p>  L'arrière-plan est rogné à la zone peinte par la bordure.</p>

CSS

css

p {  border: 0.8em darkviolet;  border-style: dotted double;  margin: 1em 0;  padding: 1.4em;  background: linear-gradient(60deg, red, yellow, red, yellow, red);  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: rgb(0 0 0 / 20%);}.border-area {  background-clip: border-area;  border-color: transparent;}