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多層，看不到底層

回答

相關問題