CSS를 사용하면 다른 클래스에서 여러 배경을 설정할 수 있습니까?

Question

CSS를 사용하여 여러 배경 레이어를 만들 수 있지만 다른 클래스의 여러 배경을 레이어 할 수 있습니까? 산이나 언덕이있어 특정 국가에 속할 수있는 타일로 작동한다고 가정 해 보겠습니다.

.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. 각 하위 사업부에 별도의 클래스를 적용 (position: relative)
2. 장소 여러 div의 용기 (position: absolute)
3. 내부 컨테이너 사업부를 만들
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