html - 如何创建具有来自多个 CSS 类的多个背景图像的元素？

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

不，因为即使可以，您将如何指定哪些图像应该放在较高位置，哪些应该放在较低位置？你不能通过重新排列类名来做到这一点，因为类属性没有顺序的概念(即使有，级联仍然是你的敌人，正如你所展示的那样)。

由于除了在单个 background-image 声明中之外没有其他方法可以指定哪些图像应该放在更高或更低的位置，因此您不得不在满了。

另一种方法是为每个类名和每个背景图像设置一个专用元素，但除非您不关心语义(根据您对 header 的使用判断，语义可能不是例)，这是一个糟糕的选项。