css - 屏蔽图像

Question

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

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

我的两张图是：

和

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

Answer 1

-webkit-mask您可以像这样使用 CSS3 属性在 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;}