Question

CSS允许元素通过background-image: url("first.png"), url("second.png"), url("third.png")

获得多个背景图像

header {
  background-image: url("header.png");
}

.with-foo {
  background-image: url("with-foo.png");
}

.with-bar {
  background-image: url("with-bar.png");
}

.with-foobar {
  background-image: url("with-foobar.png");
}

<header class="with-foo with-bar with-foobar">
  ...
</header>

在上面的代码中，标题将具有背景图像with-foobar.png，因为该样式会覆盖其他先前的语句。

是否可以仅使用CSS 添加图像到background-image属性，还是必须使用JavaScript解决方案？

Answer 1

不，因为即使你可以，你会如何指定哪些图像应该放置得更高哪些更低？你不可能通过重新排列类名来做到这一点，因为class属性没有秩序的概念（即使它确实如此，级联仍然是你的敌人，因为你＆＃39 ;已证明）。

由于除了单个background-image声明之外，没有其他方法可以指定哪些图像应该放在更高或更低的位置，因此您必须完整地编写该声明 - 以及随附的选择器。

替代方法是为每个类名和每个背景图像设置一个专用元素，但除非你不关心语义（根据你对header的使用判断，可能不是这种情况）），那个可怕的选项。

如何使用来自多个CSS类的多个背景图像创建元素？

1 个答案: