Html 我如何将画布覆盖在文本上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13987162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How would I overlay a canvas over text?
提问by KingPolygon
Hey everyone! So the image above is what I'm trying to achieve with my code, however One or the other is always pushing the other either below it or above it, instead of just sitting above each other.
嘿大家！所以上面的图像是我试图用我的代码实现的，但是一个或另一个总是将另一个推到它的下方或上方，而不是只是坐在彼此上方。
I've been reading about z-index and top:0; but no matter what I try I can't seem to get the results I want. It could be that I'm using a fade in javascript effect on the text but I'm not sure. Here's my code, what would you recommend? Thanks!
我一直在阅读有关 z-index 和 top:0 的信息；但无论我尝试什么，我似乎都无法得到我想要的结果。可能是我在文本上使用了淡入淡出 javascript 效果，但我不确定。这是我的代码，你会推荐什么？谢谢！
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
background-repeat: repeat;
font-size: 12px;
color: #333366;
}
#picOne, #picTwo {
position:relative;
display: none;
float:center;
}
#pics {
}
#my-object {
position: absolute;
z-index: 1;
top: 0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#picOne').delay(1000).fadeIn(2000).delay(2500);
$('#picTwo').delay(2000).fadeIn(1500).delay(2000);
});
</script>
</head>
<body>
<div id="pics" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="middle"><font size="200" face="Arial" id="picTwo" color="black">SOME TEXT</font></td>
</tr>
<tr><td align="center" valign="middle">
<script type="text/javascript" src="widgets.js"></script>
<script src="three.js" type="text/javascript"></script>
<script src="trail.js" type="text/css"></script>
<div id="my-object">
<canvas></canvas>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
采纳答案by Minko Gechev
I guess that's what you're looking for: http://jsfiddle.net/6C55n/
我想这就是你要找的：http: //jsfiddle.net/6C55n/
I set position absolute to both - the text and the canvas. After that I just set greater z-index to the canvas.
我将绝对位置设置为文本和画布。之后，我只是为画布设置了更大的 z-index。
The thing which should be noticed here is the use of transparent image for the canvas.
这里应该注意的是画布使用透明图像。
JavaScript
JavaScript
var canvas = document.getElementById('can'),
context = canvas.getContext('2d');
var img = document.createElement('img');
img.onload = function () {
context.drawImage(this,0,0);
};
img.src = 'http://www.planet-aye.co.uk/seasonal05/snow.png';
?
HTML
HTML
<canvas width="640" height="480" id="can"></canvas>
<div id="labelDiv">Some text</div>?
CSS
CSS
#labelDiv {
font-size: 70px;
position: absolute;
top: 280px;
left: 100px;
z-index: 1;
}
#can {
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
}
?
?
回答by Philipp Hofmann
This works fine for me: JSFiddle
这对我来说很好用：JSFiddle
HTML
HTML
?<p>Some text</p>
<canvas></canvas>?????????????????????
CSS:
CSS：
body {
background-color:#5FC0CE;
}
canvas {
position:absolute;
top:0;
left:0;
z-index:100;
background-color:#FFAE73;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
