HTML5多层，看不到底层

我想用多个画布层来实现一个简单的游戏。问题是我只能看到“顶层”图层。HTML5多层，看不到底层

http://carmenbranje.com/games/untangle%20game%203/

这是为什么？

非常感谢

卡门

来源

2012-06-05 Carmen Branje

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

来源

2012-06-05 23:23:42 magicTuscan

感谢您的回复。我在untangle.css中的canvas元素中添加了z-index。仍然只有“ui”画布可见。如果我从index.html =中删除，我可以直接看到下面的图层，但不能看到下面的图层。 –

但您只将z-index设置为零。您需要按顺序将它们全部设置为您需要它们出现在页面上的顺序。你需要通过每个画布的ID来完成。 – magicTuscan

#bg { z-index：0; \t } #guide { opacity：.7; z-index：1; } ＃guide.fadeout { opacity：1; -webkit-transition：opacity .5s linear; transition：opacity .5s linear; } ＃游戏{ position：relative; z-index：2; } #ui { -webkit-transition：opacity .3s linear; 过渡：不透明.3s线性; z-index：3; } ＃ui.dim {opality：.3; } –

最快的方法。（有一个更简洁的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; }

来源

2012-06-06 00:07:40 magicTuscan

这样做了，我还是只能看到顶层。 –

你用什么浏览器来查看？ – magicTuscan

这个答案讨论画布背景不透明度：jQuery Background Canvas transparency 莫非是缺什么？

来源

2012-06-06 00:12:51 mtf

如果我把ui canvas的不透明度设置为0.5，我可以看到下面的图层，但它已经褪色。。 –

那么我会建议，不透明是关键，你只需要设计一种方法，使背景中的所有图层透明（不透明度= 0）。你必须走在正确的轨道上，所以不会让你感到更多的代码。玩你有什么。 – mtf

HTML5多层，看不到底层

回答

相关问题