遮蔽图像

Question

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

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

我的两个图像是：

和

我无法让它为我的一生工作。有人可以 jsfiddle 或将工作结果放在这里，向我展示如何正确屏蔽图像吗？

Answer 1

您可以在 Safari 和 Chrome 中使用 -webkit-mask CSS3 属性来屏蔽它，如下所示（参见 fiddle在 Safari/Chrome 中）：

<img src="https://i.sstatic.net/oJUzS.jpg" 
     style="-webkit-mask:url('https://i.sstatic.net/4KEpA.png')" />

但是，要执行跨浏览器实现，您的蒙版将需要 .png 图像的黑色部分具有 Alpha 透明度，然后使用 CSS 位置覆盖蒙版。

Answer 2

你正在努力实现这个目标吗？ http://jsfiddle.net/6dRSh/

html

<div id="image"><img src="https://i.sstatic.net/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;}