background-clip
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
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
Experimental-
L'arrière-plan est limité (rogné) au texte en premier plan.
Syntaxe formelle
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 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 | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
clip-path
- Les propriétés relatives à l'arrière-plan :
- Le modèle de boîtes CSS