css - 屏蔽图像

Question

我正在尝试使用带有 2 个蒙版的 css 来制作这张图片，但我一无所获。我尝试使用此页面中的代码示例:

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

我的两张图片是:

和

我无法让它为我的生活工作。有人可以 jsfiddle 或在这里放一个工作结果来告诉我如何正确遮盖图像吗？

Answer 1

您可以使用 -webkit-mask CSS3 属性在 Safari 和 Chrome 中屏蔽它，如下所示 (see fiddle in 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 位置覆盖蒙版。