mozilla
Vos résultats de recherche

    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-related CSS properties: background, background-attachment, background-clip, background-color, 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: 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 (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

    Contributors to this page: teoli, BenoitL, wakka27
    Dernière mise à jour par : teoli,