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é 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.
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">This is the content of the element.</div>
</section>
#example-element {
background-image: url("/shared-assets/images/examples/leopard.jpg");
color: #d73611;
text-shadow: 2px 2px black;
padding: 20px;
border: 10px dashed #333;
font-size: 2em;
font-weight: bold;
}
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.
textExpérimental-
L'arrière-plan est limité (rogné) au texte en premier plan.
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 spécifié |
| 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
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, 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
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-clip |
| CSS Backgrounds Module Level 4 # background-clip |
Compatibilité des navigateurs
Chargement…
Voir aussi
clip-path-
Les propriétés relatives à l'arrière-plan :