다른 HTML 모양에 색상 채우기

Question

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> 

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>