Fonds multiples

  • Raccourci de la révision : CSS/Fonds_multiples
  • Titre de la révision : Fonds multiples
  • ID de la révision : 126895
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire no wording changes

Contenu de la révision

{{ gecko_minversion_header("1.9.2") }}

À partir de {{ gecko("1.9.2") }}, il est possible d'appliquer plusieurs fonds à un élément. Ceux-ci sont superposés les uns sur les autres avec le premier fond spécifié en haut et les suivants par dessous.

La définition de fonds multiples est aisée :

.maclasse {
  background: background1, background 2, ..., backgroundN;
}

Vous pouvez faire ceci à la fois avec la propriété combinée {{ cssxref("background") }} et ses sous-propriétés individuelles : {{ CSS_Reference:Background() }}.

Exemple

Dans cet exemple, trois fonds sont superposés : le logo de Firefox, un dégradé linéaire et une image d'un motif floral :

.multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}
Capture d'écran Démonstration en direct
css_multibg.png
 

Comme vous pouvez le voir, le logo de Firefox (indiqué en premier) est au dessus, suivi du dégradé, qui est affiché par dessus le motif floral. Chaque valeur des sous-propriétés ({{ cssxref("background-repeat") }} et {{ cssxref("background-position") }}) s'applique au fond correspondant. Donc la première valeur pour {{ cssxref("background-repeat") }} s'applique au premier fond (celui du dessus), et ainsi de suite.

Voir également

{{ languages( { "en": "en/CSS/Multiple_backgrounds"} ) }}

Source de la révision

<p>{{ gecko_minversion_header("1.9.2") }}</p>
<p>À partir de {{ gecko("1.9.2") }}, il est possible d'appliquer plusieurs fonds à un élément. Ceux-ci sont superposés les uns sur les autres avec le premier fond spécifié en haut et les suivants par dessous.</p>
<p>La définition de fonds multiples est aisée :</p>
<pre class="brush: css">.maclasse {
  background: background1, background 2, ..., backgroundN;
}
</pre>
<p>Vous pouvez faire ceci à la fois avec la propriété combinée {{ cssxref("background") }} et ses sous-propriétés individuelles : {{ CSS_Reference:Background() }}.</p>
<h2 id="Exemple">Exemple</h2>
<p>Dans cet exemple, trois fonds sont superposés : le logo de Firefox, un <a href="/en/CSS/-moz-linear-gradient" title="en/CSS/-moz-linear-gradient">dégradé linéaire</a> et une image d'un motif floral :</p>
<pre class="brush: css">.multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}
</pre>
<table class="standard-table" style="table-layout: fixed; width: 450px;"> <tbody> <tr> <td class="header">Capture d'écran</td> <td class="header">Démonstration en direct</td> </tr> <tr> <td><img alt="css_multibg.png" class="internal default" src="/@api/deki/files/4028/=css_multibg.png"></td> <td> <div> </div> </td> </tr> </tbody>
</table>
<p>Comme vous pouvez le voir, le logo de Firefox (indiqué en premier) est au dessus, suivi du dégradé, qui est affiché par dessus le motif floral. Chaque valeur des sous-propriétés ({{ cssxref("background-repeat") }} et {{ cssxref("background-position") }}) s'applique au fond correspondant. Donc la première valeur pour {{ cssxref("background-repeat") }} s'applique au premier fond (celui du dessus), et ainsi de suite.</p>
<h2 id="Voir_également">Voir également</h2>
<ul> <li>{{ CSS_Reference:Background() }}</li> <li><a href="/fr/Utilisation_de_dégradés" title="fr/Utilisation de dégradés">Utilisation de dégradés</a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/Multiple_backgrounds"} ) }}</p>
Revenir à cette révision