background-clip

Exemple interactif

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text;
color: transparent;

<section id="default-example">
  <div id="example-element">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

/* 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-area Non standard

L'arrière-plan est peint à l'intérieur (rogné à) de la zone peinte par la bordure, en tenant compte de border-width et border-style, mais en ignorant toute transparence introduite par border-color.

Description

L'arrière-plan est toujours dessiné derrière la bordure, donc background-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.

Accessibilité

Lorsque vous utilisez background-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 avec background-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 de background-clip: text et fournir une alternative accessible si ce n'est pas pris en charge.

Définition formelle

Syntaxe formelle

background-clip = 
  <bg-clip>#  

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

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

Exemples

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>
<p class="border-area">
  L'arrière-plan est rogné à la zone peinte par la bordure.
</p>

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

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété clip-path crée une région de rognage qui définit quelle partie de l'élément entier doit être affichée.
• Les propriétés d'arrière-plan : background, background-color, background-image, background-origin
• Introduction au modèle de boîtes CSS