如何将画布置于背景图像的顶部

Question

我有一个我想用作文档背景的图像，并在其上面放置一个canvas元素。

原因是背景很大（2048x1024），如果我把它放在画布里面，它会在每一帧浪费资源时重新绘制。

<div id="container">
    <image class = "img1" src = "./assets/game.jpg" id= "backk"/>
    <canvas id="canvas" width="1366" height="1024">No Canvas support!</canvas>    
</div>

        container {         
        position: relative;
        width:100%;
            margin : auto;

        }
    canvas{
        display:block;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        z-index:1;
        }
    img1{
        position: absolute;
        top: 0;
        left: 0;
        z-index:0;          
    }

使用上面的标记，我的CSS应该是什么才能得到结果，如下图所示：

Answer 1

绝对位置的解决方案：

＆＃13;

＆＃13;

#container {
  border: 2px solid red;
  width: 350px; height: 250px;
  position: relative;
  padding: 10px;
}
#container .img1 {
  position: absolute;
  width: 350px; height: 250px;
}
#container #canvas {
  position: absolute;
  outline: 2px solid black;
  top: 10px; left: 60px;
}

＆＃13;

    <div id="container">
      <image class="img1" src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" id="back"/>
      <canvas id="canvas" width="250" height="250">No Canvas support!</canvas></div>

＆＃13;

＆＃13;

＆＃13;

您也可以使用margin: 0 auto在没有绝对位置的情况下实现此目的， 或display: inline-block和text-align:center，或使用弹性位置，或使用transform: translate(...)

前：

#container {
  border: 2px solid red;
  width: 350px; height: 250px;
  position: relative;
  padding: 10px;
}
#container .img1 {
  display: block;
  width: 350px; height: 250px;
}
#container #canvas {
  outline: 2px solid black;
  transform: translate(50px, -250px);
}