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

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

1 个答案: