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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: background-clip
slug: Web/CSS/background-clip
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/background-clip
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>background-clip</code></strong> 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 (<em>padding</em>) ou la boîte de contenu.</p>
<div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div>
<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>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 .</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>border-box</code></dt>
<dd>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.</dd>
<dt><code>padding-box</code></dt>
<dd>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 (<em>padding</em>).</dd>
<dt><code>content-box</code></dt>
<dd>L'arrière-plan est limité (rogné) à la boîte de contenu.</dd>
<dt><code>text</code> {{experimental_inline}}</dt>
<dd>L'arrière-plan est limité (rogné) au texte en premier plan.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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);
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', 600, 580)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Définition initiale.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td>
<td>{{Spec2('CSS4 Backgrounds')}}</td>
<td>Ajout de la valeur <code>text</code>.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p class="hidden">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 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos<em>pull request</em>.</p>
<p>{{Compat("css.properties.background-clip")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("clip-path")}}</li>
<li>Les propriétés relatives à l'arrière-plan :
<ul>
<li>{{cssxref("background")}}</li>
<li>{{cssxref("background-color")}}</li>
<li>{{cssxref("background-image")}}</li>
<li>{{cssxref("background-origin")}}</li>
</ul>
</li>
<li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
</ul>
|
