使用 css/html 对不同样式的背景图像进行分层

Question

我希望能够将两个（或更多）.png 图像叠加在一起，同时以自己的单独/不同 样式调用每个图像.

在这种情况下，在一种风格中使用多个背景对我没有帮助，因为我希望在各种 “门” 的图像上显示一个透明背景的图像“地砖”随意。门是单独的样式，每块地砖都是单独的样式。我不想为门和地板的每种可能组合创建额外的组合样式，这是一种样式中的多个背景功能会迫使我做的事情。

如果可能的话，我也不想使用 img，因为我稍后会在地板和门砖的顶部出现额外的图形（角色和怪物），我将介绍为 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>

然后，您可以相应地设置背景样式以拉伸窗口：

.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 元素将呈现在图像堆栈的顶部。