css - 画像のマスキング

Question

css を使用して 2 つのマスクを使用してこの画像を作成しようとしていますが、どこにも行きません。このページのコード例を使用しようとしました:

http://www.ajaxandicons.com/2010/04/image-masking-with-css/

私の2つの画像は次のとおりです。

と

私はそれを私の人生のために働かせることができません。誰かが画像を適切にマスクする方法を示すjsfiddleまたは作業結果をここに置くことができますか?

Answer 1

-webkit-mask次のように CSS3 プロパティを使用して、Safari と Chrome でこれをマスクできます( Safari/Chrome のフィドルを参照)。

<img src="http://i.stack.imgur.com/oJUzS.jpg" 
     style="-webkit-mask:url('http://i.stack.imgur.com/4KEpA.png')" />

ただし、クロスブラウザーの実装を行うには、.png 画像の黒い部分にマスクのアルファ透明度を設定し、CSS 位置を使用してマスクをオーバーレイする必要があります。

Answer 2

これを達成しようとしていますか？http://jsfiddle.net/6dRSh/

html

<div id="image"><img src="http://i.stack.imgur.com/oJUzS.jpg">
    <div id="mask"><img src="http://img148.imageshack.us/img148/4645/4kepa.png" ></div>
</div>

CSS

#image {position:relative;}
#mask {position:absolute; top:0;}