使用CSS，我可以设置来自不同类的多个背景吗？

我知道可以使用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多个背景将是一个巨大的时间浪费。

无法使用多个类合并

背景

属性——只能设置一次。你能做的是：

创建容器div（

position:relative

）

在容器内放置多个div（

位置：绝对值

）

对每个子分区应用单独的类

可以使用

top:0px将每个图像定位在容器内；左：0px，并具有
背景位置

这里有一个例子来说明我的意思：

HTML

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

---

如果jQuery是一个选项：

$（“.mountain、.hill、.bluecountry”）。每个（函数（）{
var背景=[]；
if（$（this）.hasClass（“mountain”））
backgrounds.push（“url（'mountain.png'）”）；
if（$（this）.hasClass（“hill”））
backgrounds.push（“url（'hill.png'）”）；
if（$（this）.hasClass（“bluecountry”））
push（“url（'bluecountry.png'）”）；
$（this.css（“background”，backgrounds.join（“，”））；
});

我仍然想知道你对最终结果的想象是什么样的。“层”看起来如何？他们不知怎么混在一起了吗？你有什么想法？每个图像实际上只占用一部分空间，而图像的其余部分是透明的，它只允许背景的某些部分发生本质上的变化。我有很多这样的背景，所以我使用了负边距，但重叠的想法很好用。

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;
}