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

lnvxswe2 于 2023-03-20 发布在其他

关注(0)|答案(2)|浏览(100)

我知道可以用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多个背景的每一个可能的组合。

css

来源：https://stackoverflow.com/questions/13665634/with-css-can-i-set-multiple-backgrounds-from-different-classes

2条答案

按热度按时间

bttbmeg01#

无法使用多个类合并background属性--它只能设置一次。
1.创建一个容器div（position: relative）
1.在容器中放置多个div（position: absolute）
1.对每个细分应用单独的类
1.可以使用top: 0px; left: 0px;和background-position在容器内定位每个图像。
这里有一个例子可以说明我的意思：

超文本标记语言

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

中央支助组

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://picsum.photos/200/100/?random=1) no-repeat; 
}
.second { 
    background: url(http://picsum.photos/200/100/?random=2) no-repeat; 
    background-position: right center;
}

http://jsfiddle.net/chriskorosu/z269x0oc/1/

赞(0）回复(0）举报 2023-03-20

mznpcxlj2#

如果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(", "));
});

赞(0）回复(0）举报 2023-03-20

我来回答

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

2条答案

相关问题

热门标签

最新问答