С CSS я могу установить несколько фонов из разных классов?

Я знаю, что можно сделать несколько слоев фона с помощью CSS, но могу ли я наложить несколько фонов из разных классов? Скажем, у меня были divs, действующие как плитки, которые могли бы иметь горы или холмы и могли принадлежать определенной стране.

.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 несколько фонов для каждой возможной комбинации.

Ответы

Ответ 1

Невозможно объединить атрибут background с помощью нескольких классов - его можно установить только один раз. Что вы можете сделать:

  • создать контейнер div (position: relative)
  • поместите несколько контейнеров внутри контейнера (position: absolute)
  • применить отдельный класс к каждому под-div
  • Изображения могут располагаться внутри контейнера с помощью 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