1

divの背景画像としてhtmlコードにいくつかの画像を適用しています。画像のサイズはユーザーの要件に応じて変更でき、画像は任意の形状にすることができます (たとえば、雲、吹き出し、風船など)。適用されたすべての画像は透明です。

次に、これらの形状に色を適用します。div / span タグに background-color を書き込むと、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>
4

1 に答える 1

1

これにはマスクを使用できます。残念ながら、現在は Webkit ブラウザーでのみサポートされています。

<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>
于 2012-11-26T14:47:39.087 に答える