Question

我希望有一个从我的数据库上传的图像，并且在同一位置的完全相同的尺寸是HTML5画布。

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

我怎样才能做到这一点？

Answer 1

是

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

如果你厌倦了额外的管道，javascript可以为你做大部分的管道工作。

这是CSS-only版本的小提琴：

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);
}

Answer 2

Possible duplicate

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

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

在图像上叠加HTML5画布

2 个答案: