We want to help developers like you. Tell us about how you work: http://qsurvey.mozilla.com/s3/Developer-Audience-Survey-V2/?s=mdn

Fonds multiples

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 background et ses sous-propriétés individuelles, à l’exception de background-color : background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

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-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;
}

Result

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 (background-repeat et background-position) s'applique au fond correspondant. Donc la première valeur pour background-repeat s'applique au premier fond (celui du dessus), et ainsi de suite.

Voir également

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : teoli, Mahan91, wakka27, BenoitL
 Dernière mise à jour par : teoli,