Plusieurs classes avec plusieurs images

Question

Je suis en train de faire quelque chose comme ceci:

.box { 
    background-image: url(../img/box.png); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    display: block; 
    height: 64px; 
    margin: 90px auto; 
    overflow: hidden; 
    width: 831px; 
} 

.shadow_1 { 
    background-image: url(../img/shadow_1.png); 
    background-position: 0 100%; 
    background-repeat: no-repeat; 
    padding-bottom: 31px; 
} 

Et en HTML:

<div class="box shadow_1"></div> 

Je voudrais combiner deux classes avec deux images différentes, mais avoir l'image dans la deuxième classe remplacer la première. Est-il même possible, ou je dois utiliser deux divs?

Answer 1

Les derniers styles chargés écraseront les styles précédemment chargés. Donc dans votre cas. Tous les styles dans .box seront remplacés par le style .shadow_1 dans votre implémentation.

Vous avez raison de supposer que vous aurez besoin d'un autre div pour gérer cela.

Answer 2

Je suppose que vous voulez avoir plusieurs images d'arrière-plan sur le même élément. Il est possible et pris en charge dans toutes les versions de navigateur les plus récentes, bien que si vous voulez prendre en charge IE8 et plus tôt, vous devez utiliser plusieurs divs.

.box { 
    background-image: url(../img/box.png), url(../img/shadow_1.png); 
    background-position: 0 0, 0 100%; 
    background-repeat: no-repeat, no-repeat; 
    display: block; 
    height: 64px; 
    margin: 90px auto; 
    overflow: hidden; 
    width: 831px; 
    padding-bottom: 31px; 
}