Javascript 为不同的HTML形状填充颜色

我正在应用一些html代码中的图像作为div的背景图像。图像尺寸可以根据用户的要求更改，图像可以是任何形状（例如云、标注或气球）。所有应用的图像都是透明的

现在我想对这些形状应用颜色。如果我将背景色写入div/span标记，它将覆盖整个div，并且我无法使用canvas，因为图像尺寸会发生变化

有什么办法吗

代码：

<div style="background-color:blue;height:400px; width:400px;background-size: 100% 100%;background-repeat: no-repeat; background-image: url('cloud7.png'); position:absolute; top:10px; left:10px; height:400px; width:400px;" /> 

</div>

---

您可以为此使用遮罩。不幸的是，他们目前只是一个普通人

---

您可以为此使用遮罩。不幸的是，他们目前只是一个普通人

您可以发布您现有的代码吗？这将有助于给你一个更好的答案。我不想让角落被颜色染上颜色，颜色应该像图像一样弯曲。我不明白你的问题到底是什么。您希望以什么方式应用颜色？你有示例图片吗？你能发布你现有的代码吗？这将有助于给你一个更好的答案。我不想让角落被颜色染上颜色，颜色应该像图像一样弯曲。我不明白你的问题到底是什么。您希望以什么方式应用颜色？你有没有示例图片？非常感谢。。。。mozilla是否也有这样做的方法？如果没有，那么至少要阻止该属性应用于mozilla？非常感谢。。。。mozilla是否也有办法做到这一点？如果没有，至少要阻止该属性应用于mozilla？

<div style="background-color:blue;height:400px; width:400px; background-size:100% 100%;background-repeat: no-repeat; -webkit-mask: url('cloud7.png'); position:absolute; top:10px; left:10px; height:400px; width:400px;" /> 

</div>