我有一个我想用作文档背景的图像,并在其上面放置一个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应该是什么才能得到结果,如下图所示:
答案 0 :(得分:1)
绝对位置的解决方案:
#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;
您也可以使用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);
}