Маскировка изображения

Question

Я пытаюсь сделать это изображение, используя CSS с 2 масками, но я получаю абсолютно никуда. Я пытался использовать пример кода с этой страницы:

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

Мои два изображения:

а также

Я не могу заставить его работать на всю жизнь. Может кто-то jsfiddle или выложить здесь рабочий результат, показывающий мне, как правильно замаскировать изображение?

Answer 1

Вы можете замаскировать это в Safari и Chrome, используя -webkit-mask Свойство CSS3 выглядит так ( см. Скрипку в Safari / Chrome):

<img src="https://stackru.com/images/60f0bdae3534bf87c867069333ce8ad6d5f907d9.jpg" 
     style="-webkit-mask:url('https://stackru.com/images/35b4c27d4e3bab38cb61cddf4f62bf8b5d9b19ad.png')" />

Однако для реализации кросс-браузерной маски вашей маске потребуется альфа-прозрачность в черном разделе изображения.png, а затем наложение маски с использованием позиции CSS.

Answer 2

Вы пытаетесь достичь этого? http://jsfiddle.net/6dRSh/

HTML

<div id="image"><img src="https://stackru.com/images/60f0bdae3534bf87c867069333ce8ad6d5f907d9.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;}