使用CSS，我可以设置不同类的多个背景吗？ [英] With CSS, can I set multiple backgrounds from different classes?

问题描述

我知道有可能使用CSS制作多个背景图层，但是我可以分层来自不同类的多个背景吗？
说我有div作为瓦片，可能有山脉或丘陵，可能属于某个国家。

I know that it is possible to make multiple background layers with CSS, but can I layer multiple backgrounds coming from different classes? Say I had divs acting as tiles that could have mountains or hills and could belong to a certain country.

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

然而，这不工作;当我做像

would be my css. However, this doesn't work; when I do something like

<div class="hill bluecountry">

它不会分层的背景，只会使用其中之一。
有没有办法使这项工作？我实际上有比这更多的东西，这将是一个巨大的浪费时间，必须单独写CSS多个背景的每个可能的组合。

it will not layer the backgrounds, and will only use one of them. Is there any way to make this work? I actually have more stuff than this, and it would be a huge waste of time to have to individually write CSS multiple backgrounds for every possible combination.

推荐答案

无法使用多个类合并 background 属性 - 它只能设置一次。您可以做的是：

There's no way to merge the background attribute using multiple classes -- it can only be set once. What you could do is:

1. 创建容器div（ position：relative ）


2. 在容器中放置多个div（ position：absolute ）


3. c> top：0px; left：0px; ，以及 background-position 。

1. create a container div (position: relative)
2. place multiple divs inside the container (position: absolute)
3. apply a separate class to each sub-div
4. The images can each be positioned within the container by using top: 0px; left: 0px;, and with background-position.

$ b b

以下是我的意思范例：

Here's an example of what I mean:

HTML

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

CSS >

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

这篇关于使用CSS，我可以设置不同类的多个背景吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！