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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
- 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
Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub https://github.com/mdn/browser-compat-data, n'hésitez pas à contribuer en proposant vospull request.
Voir aussi
clip-path
- Les propriétés relatives à l'arrière-plan :
- Le modèle de boîtes CSS