CSSを使用すると、異なるクラスから複数の背景を設定できますか？

Question

CSSで複数の背景レイヤを作成することは可能ですが、異なるクラスから複数の背景をレイヤーすることはできますか？ 山と丘があり、特定の国に属している可能性のあるタイルとして機能するdivを持っていたとします。

.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"); 
} 

は私のCSSです。ただし、これは機能しません。私は

<div class="hill bluecountry"> 

ような何かを行うときには、背景を層ではないだろう、とだけそれらのいずれかを使用します。 この作業を行う方法はありますか？私は実際これより多くのものを持っており、可能なすべての組み合わせに対してCSSの複数の背景を個別に書き込む必要があるのは時間の無駄です。

Answer 1

複数のクラスを使用してbackground属性をマージする方法はありません。一度しか設定できません。何あなたができることは次のとおりです。

1. は、各サブdiv要素に別のクラスを適用します（position: relative）
2. 場所の複数のdivコンテナ（position: absolute）
3. 内のコンテナのdivを作成
4. イメージすることができ、各top: 0px; left: 0px;およびbackground-positionを使用して容器内に配置することができます。

ここで私が何を意味するかの例です：

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