掩盖图像

Question

我正在尝试使用带有2个蒙版的css制作此图像，但我绝对无处可去。 我曾尝试使用此页面中的代码示例：

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

我的两张照片是：

和

我无法让它为我的生活而工作。有人可以在这里查看或提供一个工作结果，向我展示如何正确掩盖图像吗？

Answer 1

您可以使用-webkit-mask CSS3属性（例如see fiddle in 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图像的黑色部分中使用Alpha透明度，然后使用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;}