15

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">

背景を重ねることはなく、そのうちの1つだけを使用します。これを機能させる方法はありますか？私は実際にはこれよりも多くのものを持っており、考えられるすべての組み合わせに対してCSSの複数の背景を個別に作成しなければならないのは時間の無駄です。

4

2 に答える 2

3

background複数のクラスを使用して属性をマージする方法はありません。設定できるのは1回だけです。あなたにできることは：

  1. コンテナを作成するdiv（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

于 2012-12-02T01:51:55.607 に答える
0

jQueryがオプションの場合：

$(".mountain, .hill, .bluecountry").each(function () {
  var backgrounds = [];
  if ($(this).hasClass("mountain"))
    backgrounds.push("url('mountain.png')");
  if ($(this).hasClass("hill"))
    backgrounds.push("url('hill.png')");
  if ($(this).hasClass("bluecountry"))
    backgrounds.push("url('bluecountry.png')");
  $(this).css("background", backgrounds.join(", "));
});
于 2020-10-04T22:44:46.357 に答える