Question

所以我有一个3D游戏，三个透视镜头在3D空间中移动。现在，当您在此3D空间中有一个“已选定”项目时，我希望屏幕左上角出现一个按钮以取消选择该项目。有没有办法用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的游戏中做这件事？

Answer 1

确定您应该将按钮的背景设置为透明。那么你应该做的是将按钮的位置设置为绝对。在CSS中，它看起来像这样。

#myImage {
    position: absolute;
}

*如有必要，您可能需要更改图像的z-index。如果按钮显示在游戏屏幕后面，你会这样做，在这种情况下你最有可能将它添加到你的CSS中：

z-index: 1;

让html按钮重叠到我的游戏中？

1 个答案: