Con i CSS, posso impostare più sfondi da classi diverse?

Question

So che è possibile creare più livelli di sfondo con i CSS, ma è possibile sovrapporre più sfondi provenienti da classi diverse? Supponiamo che i divs agissero come tessere che potrebbero avere montagne o colline e potrebbero appartenere a un determinato paese.

.mountain { 
    background: url("mountain.png"); 
} 
.hill { 
    background: url("hill.png"); 
} 
.bluecountry { 
    background: url("bluecountry.png"); 
} 
.redcountry { 
    background: url("redcountry.png"); 
} 
.greencountry { 
    background: url("greencountry.png"); 
} 

sarebbe il mio css. Tuttavia, questo non funziona; quando faccio qualcosa come

<div class="hill bluecountry"> 

non stratificherà gli sfondi e ne userà solo uno. C'è un modo per farlo funzionare? In realtà ho più cose di questo, e sarebbe un enorme spreco di tempo dover scrivere individualmente CSS sfondi multipli per ogni combinazione possibile.

Answer 1

Non c'è modo di unire l'attributo background usando più classi - può essere impostato solo una volta. Che cosa si potrebbe fare è:

1. creare un div contenitore (position: relative)
2. luogo più div all'interno del contenitore (position: absolute)
3. applicare una classe separata per ogni sotto-div
4. Le immagini possono ciascuna essere posizionato all'interno del contenitore utilizzando top: 0px; left: 0px; e con background-position.

Ecco un esempio di ciò che intendo:

HTML

<div class="container"> 
    <div class="first"></div> 
    <div class="second"></div> 
</div>​ 

CSS

html, body { height: 100%; } 
div { 
    display: inline-block; 
    width: 400px; 
    height: 100px; 
} 
.container { 
    position: relative; 
} 
.first, .second { 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
.first { 
    background: url(http://lorempixel.com/200/100/sports/1) no-repeat; 
} 
.second { 
    background: url(http://lorempixel.com/200/100/sports/2) no-repeat; 
    background-position: right center; 
} 

http://jsfiddle.net/32G4A/2