使HTML按鈕重疊到我的遊戲？

所以我有一個3D遊戲，有一個three.js視角相機在3D空間中移動。現在，當您在此3D空間中選擇了一個項目時，我想要一個按鈕出現在屏幕的左上角以取消選擇該項目。有沒有辦法使用HTML做到這一點？因爲現在我有一個按鈕，但它將遊戲推到了它的下面，而不是作爲html的一部分。我認爲我需要使按鈕的背景透明，並手動將遊戲推到屏幕的頂部。使HTML按鈕重疊到我的遊戲？

<body style="background-color: #222222;"> 

    //Here is the button that I need to be transparent 
    //because I have no way to test it, I have no idea if that style code I have makes it transparent or not 
    <input type="image" id="myimage" style="height:200px;width:200px;border:0 none;background-color: transparent;" src="media/undo.png"/> 

    <script src="src/game.js"></script> 
    <script src="src/main.js"></script> 

    //Here is where I load in the game 
    <script> 
    $(document).ready(function(){ 
     //All loading stuff 
     THREE.ImageUtils.crossOrigin = ''; 
     var game = new Main($(document).width() - 10, $(document).height() - 20, "res/games.json"); 
     game.init(); 
     function gameUpdate(){ 
      game.update(); 
      window.requestAnimationFrame(gameUpdate, game.renderer.domElement); 
     } 
     gameUpdate(); 
    }); 
    </script> 
    //Done with game loading script 

</body>

這是問題的一個畫面：http://puu.sh/dg4rJ/5a25c817b7.jpg 我需要比賽和按鈕待在一起。無論如何要做到這一點，還是應該在JS中的遊戲中工作？

來源

2014-12-04 user3055557

您是否嘗試過加入的位置是：絕對的呢？ – coopersita 2014-12-04 00:49:09

如有必要，更改CSS中的'z-index'。圖像的背景應該是透明的。 – irrelephant 2014-12-04 01:04:03

對於某些你應該設置按鈕的背景是透明的。那麼你應該做的是將按鈕的位置設置爲絕對。在CSS中，它看起來像這樣。

#myImage { 
    position: absolute; 
}

*如有必要，您可能想要修改圖片的z-index。你可以這樣做，如果按鈕被顯示在遊戲畫面後面，在這種情況下，你很可能會添加這個到你的CSS：

z-index: 1;

來源

2014-12-04 01:26:53

太簡單了，我不敢相信我無法通過搜索找到。謝謝！ – user3055557 2014-12-06 21:51:50

當然可以！祝你的項目好運！ – 2014-12-06 23:03:13

使HTML按鈕重疊到我的遊戲？

回答

相關問題