Html 在图像上覆盖 HTML5 画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14824747/
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
Overlay HTML5 canvas over image
提问by Colin747
I want to have an image which is uploaded from my database and on top of it the exact same size in the same position is a HTML5 canvas.
我想要一个从我的数据库上传的图像，在它的顶部，相同位置的完全相同的大小是一个 HTML5 画布。
Most of the solutions I have found I have been using JQuery/JavaScript, however I want a similar solution if possible just using CSS3 as the images are being outputted from a database and there can be more than one image on the page and each image will have a canvas.
我发现的大多数解决方案我一直在使用 JQuery/JavaScript，但是如果可能的话，我想要一个类似的解决方案，只要使用 CSS3，因为图像是从数据库输出的，并且页面上可能有多个图像，每个图像都会有一个画布。
How can I achieve this?
我怎样才能做到这一点？
采纳答案by markE
Yes.
是的。
You can do this entirely in CSS, but you will have to add some specific HTML plumbing for each image.
您可以完全在 CSS 中完成此操作，但您必须为每个图像添加一些特定的 HTML 管道。
If you ever get tired of the extra plumbing, javascript could do most of the plumbing for you.
如果您厌倦了额外的管道，javascript 可以为您完成大部分管道。
Here is a Fiddle of the CSS-only version:
这是仅 CSS 版本的小提琴：
http://jsfiddle.net/m1erickson/g3sTL/
http://jsfiddle.net/m1erickson/g3sTL/
The HTML:
HTML：
<div class="outsideWrapper">
<div class="insideWrapper">
<img src="house-icon.jpg" class="coveredImage">
<canvas class="coveringCanvas"></canvas>
</div>
</div>
Of course, in your version, you would replace the image src with your dynamic database call to fetch the image.
当然，在您的版本中，您将使用动态数据库调用替换图像 src 以获取图像。
The CSS:
CSS：
.outsideWrapper{
width:256px; height:256px;
margin:20px 60px;
border:1px solid blue;}
.insideWrapper{
width:100%; height:100%;
position:relative;}
.coveredImage{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
}
.coveringCanvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-color: rgba(255,0,0,.1);
}
回答by Adrian Larson
可能重复。
Depending on how many images are in the database, you could have a separate canvas id for each with the name of the image file (e.g. canvas #foo { background:url(foo.jpg) }). I would load this in a separate stylesheet. :)
根据数据库中有多少图像，您可以为每个带有图像文件名称的单独画布 ID（例如canvas #foo { background:url(foo.jpg) }）。我会在一个单独的样式表中加载它。:)
It would probably be easier to maintain a Javascript solution though if your database is dynamic. A few lines of javascript would be sufficient, instead of constantly updating a stylesheet with new names. Less errortypo prone as well.
如果您的数据库是动态的，那么维护 Javascript 解决方案可能会更容易。几行 javascript 就足够了，而不是用新名称不断更新样式表。更少的错误错字容易为好。
