HTML5 多层，看不到低层答案

【问题标题】：HTML5 Multiple Layers, can't see lower layersHTML5 多层，看不到低层
【发布时间】：2012-06-05 23:10:30
【问题描述】：

我正在尝试实现一个具有多个画布层的简单游戏。问题是我只能看到“顶层”。

这是为什么？

非常感谢

卡门

【问题讨论】：

【解决方案1】：

也许我错过了！但是您的画布上似乎没有 z 索引。这将解决您的问题。

【讨论】：

感谢您的回复。我在 untangle.css 中的画布元素中添加了 z-index。仍然只有“ui”画布可见。如果我从 index.html = 中删除，我可以直接看到下面的图层，但看不到下面的图层。
但是您只将 z-index 设置为零。您需要将它们全部设置为您需要它们出现在页面上的顺序。您需要通过每个画布的 id 来完成。
#bg{ z-index:0; } #guide { 不透明度：.7; z-索引：1； } #guide.fadeout { 不透明度：1; -webkit-transition：不透明度 .5s 线性；过渡：不透明度 .5s 线性； } #game{ 位置：相对； z-索引：2； } #ui { -webkit-transition：不透明度 .3s 线性；过渡：不透明度 .3s 线性； z-索引：3； } #ui.dim { 不透明度：.3; }
.css 文件中的每个画布元素都有 z-indexes。

【解决方案2】：

最快的方法。（有一种更整洁的 CSS 方式）。在您的外部 CSS 文档中尝试以下操作。

#layers canvas{
left: 50%;
margin-left: -384px;
position: absolute;
}

#bg{ z-index:1; }
#guide{ z-index:2; }
#game{ z-index:3; }
#ui{ z-index:4; }

【讨论】：

【解决方案3】：

这个答案讨论了画布的背景不透明度：jQuery Background Canvas transparency 这可能是缺少的吗？

【讨论】：

如果我将 ui 画布不透明度设置为 0.5，我可以看到下面的图层，但它已褪色。 .
那么我建议不透明度是关键，您只需要设计一种方法使背景中的所有图层都透明（不透明度=0）。你必须走在正确的轨道上，这样你就不会因为更多的代码而感到厌烦。玩你所拥有的。