将HTML5画布覆盖在图像上

我想有一个图像，这是从我的数据库上传，并在它上面的完全相同的大小在相同的位置是一个HTML5画布

我发现的大多数解决方案都使用JQuery/JavaScript，但是如果可能的话，我想要一个类似的解决方案，只使用CSS3，因为图像是从数据库输出的，页面上可以有多个图像，并且每个图像都有一个画布

我如何才能做到这一点？

根据数据库中的图像数量，每个图像都可以有一个单独的画布id和图像文件的名称（例如，

canvas{foo{background:url（foo.jpg）}

）。我会将其加载到单独的样式表中。：）

如果数据库是动态的，那么维护Javascript解决方案可能会更容易。几行javascript就足够了，而不是不断用新名称更新样式表。也不容易出错。是的

您可以完全在CSS中完成这项工作，但必须为每个图像添加一些特定的HTML管道

如果您厌倦了额外的管道，javascript可以为您完成大部分管道

以下是一个仅CSS版本：

HTML：

<div class="outsideWrapper">
    <div class="insideWrapper">
        <img src="house-icon.jpg" class="coveredImage">
        <canvas class="coveringCanvas"></canvas>
    </div>
</div>

---

有没有一种方法可以在不事先知道图像大小的情况下为图像列表执行此操作？从外包装中删除宽度/高度会使所有这些双div包装中的所有图像和画布在一个点上渲染。解决了这个问题。我使用Flask是为了让python可以读取图像尺寸，Jinja可以将outsideWrapper div的内联样式设置为等于尺寸。重要的一点是：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);
}