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

【问题标题】：Make html button overlap into my game?让html按钮重叠到我的游戏中？
【发布时间】：2015-02-01 18:13:55
【问题描述】：

所以我有一个 3D 游戏，它带有一个 three.js 透视相机，它在 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 的游戏中努力做到这一点？

【问题讨论】：

你试过添加 position:absolute 吗？
如有必要，更改 CSS 中的 z-index。图片的背景应该是透明的。

标签： javascript html css image button

【解决方案1】：

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

#myImage {
    position: absolute;
}

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

z-index: 1;

【讨论】：

如此简单，我不敢相信我无法通过搜索找到它。谢谢！