From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- .../border-image_generator/index.html | 2617 ------------------ .../border-image_generator/index.md | 2617 ++++++++++++++++++ .../border-radius_generator/index.html | 1593 ----------- .../border-radius_generator/index.md | 1593 +++++++++++ .../box-shadow_generator/index.html | 2878 -------------------- .../box-shadow_generator/index.md | 2878 ++++++++++++++++++++ .../web/css/css_backgrounds_and_borders/index.html | 115 - .../web/css/css_backgrounds_and_borders/index.md | 115 + .../resizing_background_images/index.html | 116 - .../resizing_background_images/index.md | 116 + .../using_multiple_backgrounds/index.html | 56 - .../using_multiple_backgrounds/index.md | 56 + 12 files changed, 7375 insertions(+), 7375 deletions(-) delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md (limited to 'files/fr/web/css/css_backgrounds_and_borders') diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html deleted file mode 100644 index c598a24870..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2617 +0,0 @@ ---- -title: Générateur de border-image -slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

- - - - - - - -

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md new file mode 100644 index 0000000000..c598a24870 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md @@ -0,0 +1,2617 @@ +--- +title: Générateur de border-image +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

+ + + + + + + +

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html deleted file mode 100644 index 0cb8e25181..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1593 +0,0 @@ ---- -title: Générateur de border-radius -slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

- -

border-radius-generator

- - - - - - - -

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md new file mode 100644 index 0000000000..0cb8e25181 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md @@ -0,0 +1,1593 @@ +--- +title: Générateur de border-radius +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

+ +

border-radius-generator

+ + + + + + + +

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html deleted file mode 100644 index bc0470ae50..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2878 +0,0 @@ ---- -title: Générateur de box-shadow -slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.

- - - - - - - -
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md new file mode 100644 index 0000000000..bc0470ae50 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md @@ -0,0 +1,2878 @@ +--- +title: Générateur de box-shadow +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.

+ + + + + + + +
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.html b/files/fr/web/css/css_backgrounds_and_borders/index.html deleted file mode 100644 index bac2b33946..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: CSS Backgrounds and Borders -slug: Web/CSS/CSS_Backgrounds_and_Borders -tags: - - Aperçu - - CSS - - CSS Backgrounds and Borders - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders ---- -
{{CSSRef}}
- -

CSS Backgrounds and Borders est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.

- -

Référence

- -

Propriétés CSS

- - - -

Guides

- -
-
Manipuler plusieurs arrière-plans
-
Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.
-
Mettre à l'échelle les images utilisées pour un arrière-plan
-
Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.
-
Appliquer des couleurs sur des éléments HTML grâce à CSS
-
Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.
-
- -

Outils

- -
-
Générateur pour border-image
-
Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).
-
Générateur pour border-radius
-
Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).
-
Générateur pour box-shadow
-
Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds')}}{{Spec2('CSS3 Backgrounds')}} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.md b/files/fr/web/css/css_backgrounds_and_borders/index.md new file mode 100644 index 0000000000..bac2b33946 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/index.md @@ -0,0 +1,115 @@ +--- +title: CSS Backgrounds and Borders +slug: Web/CSS/CSS_Backgrounds_and_Borders +tags: + - Aperçu + - CSS + - CSS Backgrounds and Borders + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +
{{CSSRef}}
+ +

CSS Backgrounds and Borders est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.

+ +

Référence

+ +

Propriétés CSS

+ + + +

Guides

+ +
+
Manipuler plusieurs arrière-plans
+
Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.
+
Mettre à l'échelle les images utilisées pour un arrière-plan
+
Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.
+
Appliquer des couleurs sur des éléments HTML grâce à CSS
+
Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.
+
+ +

Outils

+ +
+
Générateur pour border-image
+
Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).
+
Générateur pour border-radius
+
Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).
+
Générateur pour box-shadow
+
Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds')}}{{Spec2('CSS3 Backgrounds')}} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html deleted file mode 100644 index 6a92d4d7e5..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Mettre à l'échelle des images en arrière-plan -slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -tags: - - CSS - - Guide - - Intermédiaire - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images ---- -
{{CSSRef}}
- -

La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.

- -

Carreler une image de grande taille

- -

Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.

- -

- -

On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :

- -
.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-}
-
- -

On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à auto.

- -

Étirer une image

- -

Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.

- -
background-size: 300px 150px;
-
- -

L'image suivante montre le résultat obtenu.

- -

Logo de Firefox étité

- -

Agrandir une image

- -

On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.

- -

Logo MDN à l'échelle

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.

- -

Valeurs spéciales : contain et cover

- -

En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : contain et cover. 

- -

contain

- -

La valeur contain spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.

- -

Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur contain en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).

- -

{{EmbedLiveSample("contain", "100%", "220")}}

- -
<div class="bgSizeContain">
-  <p>Redimensionnez la fenêtre de votre navigateur.</p>
-</div>
- -
.bgSizeContain {
-  height: 200px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

cover

- -

La valeur cover assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.

- -

{{EmbedLiveSample("cover", "100%", "220")}}

- -

Cet exemple utilise le document HTML et la feuille de style suivants :

- -
<div class="bgSizeCover">
-  <p>Redimensionnez la fenêtre de votre navigateur.</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md new file mode 100644 index 0000000000..6a92d4d7e5 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -0,0 +1,116 @@ +--- +title: Mettre à l'échelle des images en arrière-plan +slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +tags: + - CSS + - Guide + - Intermédiaire + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +--- +
{{CSSRef}}
+ +

La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.

+ +

Carreler une image de grande taille

+ +

Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.

+ +

+ +

On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :

+ +
.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+
+ +

On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à auto.

+ +

Étirer une image

+ +

Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.

+ +
background-size: 300px 150px;
+
+ +

L'image suivante montre le résultat obtenu.

+ +

Logo de Firefox étité

+ +

Agrandir une image

+ +

On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.

+ +

Logo MDN à l'échelle

+ +
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.

+ +

Valeurs spéciales : contain et cover

+ +

En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : contain et cover. 

+ +

contain

+ +

La valeur contain spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.

+ +

Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur contain en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).

+ +

{{EmbedLiveSample("contain", "100%", "220")}}

+ +
<div class="bgSizeContain">
+  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+</div>
+ +
.bgSizeContain {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}
+ +

cover

+ +

La valeur cover assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.

+ +

{{EmbedLiveSample("cover", "100%", "220")}}

+ +

Cet exemple utilise le document HTML et la feuille de style suivants :

+ +
<div class="bgSizeCover">
+  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+</div>
+ +
.bgSizeCover {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index 04ac4ad67d..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Utiliser plusieurs arrière-plans -slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans ---- -
{{CSSRef}}
- -

Avec CSS3, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.

- -

Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :

- -
.maClasse {
-  background: background1, background 2, ..., backgroundN;
-}
-
- -

Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

- -

Exemples

- -

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.

- -

CSS

- -
.exemple_multi_ar {
-  width: 100%;
-  height: 400px;
-  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
-  background-repeat: no-repeat, no-repeat, no-repeat;
-  background-position: bottom right, left, right;
-}
- -

HTML

- -
<div class="exemple_multi_ar"></div>
- -

Résultat

- -

{{EmbedLiveSample('Exemple','100%','400')}}

- -

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).

- -
-

Note : Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton Tidy de la section CSS.

-
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md new file mode 100644 index 0000000000..04ac4ad67d --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md @@ -0,0 +1,56 @@ +--- +title: Utiliser plusieurs arrière-plans +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans +--- +
{{CSSRef}}
+ +

Avec CSS3, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.

+ +

Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :

+ +
.maClasse {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

+ +

Exemples

+ +

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.

+ +

CSS

+ +
.exemple_multi_ar {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+}
+ +

HTML

+ +
<div class="exemple_multi_ar"></div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple','100%','400')}}

+ +

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).

+ +
+

Note : Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton Tidy de la section CSS.

+
+ +

Voir aussi

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