Маскировка изображения - PullRequest
Новая
       20

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

0 голосов
/ 12 февраля 2011

I

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

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

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

enter image description here

и

enter image description here

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

Ответы [ 2 ]

2 голосов
/ 12 февраля 2011

Вы пытаетесь достичь этого?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;}
2 голосов
/ 12 февраля 2011

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

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

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

...