From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/background-clip/index.html | 151 ++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 files/fr/web/css/background-clip/index.html (limited to 'files/fr/web/css/background-clip/index.html') diff --git a/files/fr/web/css/background-clip/index.html b/files/fr/web/css/background-clip/index.html new file mode 100644 index 0000000000..9b8e6c5426 --- /dev/null +++ b/files/fr/web/css/background-clip/index.html @@ -0,0 +1,151 @@ +--- +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

+ +
/* 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

+ +
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

+ +

{{EmbedLiveSample('Exemples', 600, 580)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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

+ + -- cgit v1.2.3-54-g00ecf