html - 使用 css/html 将不同样式的背景图像分层

Question

我希望能够将两张(或更多).png 图像叠加在一起，同时从其自己的单独/不同 样式调用每张图像.

在这种情况下，在一种样式中使用多个背景对我没有帮助，因为我希望在各种< strong>“地砖”随意。门是独立的风格，每 block 地砖都是独立的风格。我不想为门和地板的每种可能组合创建额外的组合样式，这是一种样式中的多个背景功能会迫使我做的。

如果可能的话，我也不想使用 img，因为我稍后会在地板和门砖上出现额外的图形( Angular 色和怪物)，我将作为 img 介绍。

提前致谢。

Answer 1

当应用多个背景图像时(大约向下 https://css-tricks.com/almanac/properties/b/background-image/ 的 20%)，您需要用逗号分隔图像，这意味着将它们打包成相同的样式。 CSS3 不允许您更改堆栈中的单个图像。

因此，有几个选项可供您选择:

• 使用相互重叠的多个元素。使用绝对定位允许重叠元素。
• 使用伪元素(::before、::after)将图像应用到父图像上。

两者本质上是一样的。这是一些样板代码:

<div class="game-window">
  <div class="game-background walls"></div>
  <div class="game-backgroud tiles"></div>
</div>

然后，您可以相应地设置背景样式以拉伸(stretch)窗口:

.game-window {
  position: relative;
  width: 640px;
  height: 480px; /* Old school */
}

.game-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.walls {
  background: url(/images/walls.png);
}

...

如果没有 z-indexing，最后一个 HTML 元素将呈现在图像堆栈的顶部。