background-clip
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
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
Expé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
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-clip | ||||||||||||
border-area | ||||||||||||
border-box | ||||||||||||
content-box | ||||||||||||
padding-box | ||||||||||||
text |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
Voir aussi
clip-path
-
Les propriétés relatives à l'arrière-plan :