需要注意的是：canvas和img（做背景的）需要放到一个盒子中，这个盒子需要设置相对位置，而canvas和img需要设置相同的相对位置（父标签的左上角为参考）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
/*一些基本的css*/
.title{
display: block;
line-height: 200px;
font-size: 20px;
font-family: "宋体";
}
/*为了能够设置两个标签叠加在一起，需要设置其父标签*/
.father{
/*标签位置设置为相对的*/
position: relative;
text-align: center;
width: 800px;
}
/*canvas的大小需要在起标签内设置，否则会拉伸或缩小默认的大小*/
.canvas{
border:1px solid black;
/*位置绝对*/
position: absolute;
top: 0;
left: 110;
/*设置所在层数，在上层*/
z-index: 1;
}
/*需要将img背景图的尺寸和canvas的尺寸设置相同*/
.canvas_bgp{
width: 650px;
height: 414px;
/*位置绝对*/
position: absolute;
top: 0;
left: 110;
}
</style>
<body>
<div align="center" class="title">
使用css设置canvas背景图
</div>
<!-- 一个存放canvas和img的盒子 -->
<div align="center" class="father">
<canvas class="canvas" width="650px" height="414px" id="canvas"></canvas>
<img src="timg.jpg" class="canvas_bgp">
</div>
<script type="text/javascript">
//一个使用canvas简单的画图
//注意：需要写在canvas标签后
var my_canvas=document.getElementById("canvas");
var ctx=my_canvas.getContext("2d");
// 画图
ctx.rect(150,60,300,300);
ctx.stroke();
</script>
</body>
</html>
效果图
扩展
我们也可以给其他标签设置背景图片，如两个图片的浮动，可以通过切换z-index设置图层。
5358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
