1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
title: background-clip
slug: Web/CSS/background-clip
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/background-clip
---
{{CSSRef}}
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.
{{EmbedInteractiveExample("pages/css/background-clip.html")}}
Si aucune image ({{cssxref("background-image")}}) ni couleur ({{cssxref("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 {{cssxref("border-style")}} ou {{cssxref("border-image")}}). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .
## Syntaxe
```css
/* 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_inline}}
- : L'arrière-plan est limité (rogné) au texte en premier plan.
### Syntaxe formelle
{{csssyntax}}
## Exemples
### CSS
```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
```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
{{EmbedLiveSample('Exemples', 600, 580)}}
## Spécifications
| Spécification | État | Commentaires |
| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------- |
| {{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
| {{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}} | {{Spec2('CSS4 Backgrounds')}} | Ajout de la valeur `text`. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.background-clip")}}
## Voir aussi
- {{cssxref("clip-path")}}
- Les propriétés relatives à l'arrière-plan :
- {{cssxref("background")}}
- {{cssxref("background-color")}}
- {{cssxref("background-image")}}
- {{cssxref("background-origin")}}
- [Le modèle de boîtes CSS](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte)
|
