sup*_*oon 15 html html5 canvas
假设我有一个带有画布的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一无所知我觉得应该不难做到这一点,希望有人能在这里伸出手,谢谢:)
Lok*_*tar 16
你只需要使用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>
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;
}