说我有一个index.html,其中有一个画布：
<html> <head> </head> <body style="text-align: center;background: #f2f6f8;"> <div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; Box-shadow: 0 5px 50px #333"> <canvas id="gameCanvas" width="320" height="480"></canvas> </div> </body> </html>
而画布显示的确这样~~~
现在我想把一个图像作为背景背后的画布,我试图在身体中添加一个img标签：
<html> <head> </head> <body style="text-align: center;background: #f2f6f8;"> <img src="xxx.png" alt="" /> <div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; Box-shadow: 0 5px 50px #333"> <canvas id="gameCanvas" width="320" height="480"></canvas> </div> </body> </html>
但是后来的画布似乎显示出来的图像不在它的顶部…
我真的不知道什么关于html我认为这不是很难完成这个,希望有人可以在这里给一个手,谢谢:)
解决方法
Live Demo
你只需要使用z-index.我将图像和canvas元素放在一个容器中,并将它们放在一起,使画布总是在图像的上方.
另外一个注意事项,你不应该使用CSS来调整你的画布,你应该直接通过属性来做.在我的小提琴中,我通过JS做了.
<div id="container">
<img class='img' src="http://lorempixel.com/320/480/" alt="" />
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
CSS
body{text-align: center;background: #f2f6f8;}
.img{position:absolute;z-index:1;}
#container{
display:inline-block;
width:320px;
height:480px;
margin: 0 auto;
background: black;
position:relative;
border:5px solid black;
border-radius: 10px;
Box-shadow: 0 5px 50px #333}
#gameCanvas{
position:relative;
z-index:20;
}
