填充顏色不同的HTML形狀

Question

我申請在HTML代碼中的一些圖像作爲一個div的背景圖像。所述的圖像尺寸可按照用戶的要求改變和圖像可以是任何形狀（例如雲或標註或氣球）。所有應用的圖像都是透明的。

現在我想的顏色適用於這些形狀。如果我爲div/span標籤寫入背景顏色，它會覆蓋整個div，並且由於圖像尺寸發生變化，我無法使用畫布。

有沒有辦法做到這一點？

代碼：

<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> 

Answer 1

您可以使用口罩這一點。不幸的是，他們目前只有supported in Webkit browsers。

<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>