24

我想要一张从我的数据库上传的图像，在它之上，相同位置的完全相同大小是 HTML5 画布。

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

我怎样才能做到这一点？

4

2 回答 2

20

是的。

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

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

这是纯 CSS 版本的小提琴：

http://jsfiddle.net/m1erickson/g3sTL/

的HTML：

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

当然，在您的版本中，您可以将图像 src 替换为动态数据库调用以获取图像。

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);
}
于 2013-02-12T23:37:56.400 回答
3

可能重复。

根据数据库中有多少图像，您可以为每个图像文件的名称（例如canvas #foo { background:url(foo.jpg) }）有一个单独的画布ID。我会将其加载到单独的样式表中。:)

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

于 2013-02-12T22:32:12.960 回答