mozilla

Révision 623451 sur Fonds multiples

  • Raccourci de la révision : Web/CSS/Fonds_multiples
  • Titre de la révision : Fonds multiples
  • ID de la révision : 623451
  • Créé :
  • Créateur : teoli
  • Version actuelle ? Oui
  • Commentaire CSS/Fonds_multiples Web/CSS/Fonds_multiples

Contenu de la révision

Avec CSS3, 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. Seul le dernier fond peut inclure une couleur d’arrière-plan.

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

.ma-classe {
  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, à l’exception de {{ cssxref("background-color") }} : {{ 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 :

.exemple-fonds-multiples {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
        linear-gradient(to right, 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;
}
Résultat
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

Source de la révision

<p><span class="seoSummary">Avec <a href="/fr/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, 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.</span> Seul le dernier fond peut inclure une couleur d’arrière-plan.</p>
<p>La définition de fonds multiples est aisée :</p>
<pre class="brush: css">
.ma-classe {
&nbsp; 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, à l’exception de {{ cssxref("background-color") }} : {{ 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="/fr/docs/CSS/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">
.exemple-fonds-multiples {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">
 <tbody>
  <tr>
   <td class="header">Résultat</td>
  </tr>
  <tr>
   <td style="padding:0;"><img alt="css_multibg.png" class="internal default" src="/@api/deki/files/4028/=css_multibg.png" style="display:block;" /></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.&nbsp;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_.C3.A9galement">Voir également</h2>
<ul>
 <li>{{ CSS_Reference:Background() }}</li>
 <li><a href="/fr/docs/CSS/Utilisation_de_dégradés_CSS" title="fr/Utilisation de dégradés">Utilisation de dégradés</a></li>
</ul>
Revenir à cette révision