屏蔽图像 [英] Masking an Image

问题描述

我想这个图像使用css与2面具，但我得到绝对无处。
Ive尝试使用此页面的代码示例：

）：

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

但是，要做一个跨浏览器实现，你的面具将需要alpha透明度的黑色部分.png图像，然后使用CSS位置覆盖蒙版。

I am trying to make this image using css with 2 masks, but i am getting absolutely nowhere. Ive tried to use the code example from this page:

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

My two images are:

and

I cant get it to work for the life of me. Can someone jsfiddle or put a working result here showing me how to properly mask the image?

解决方案

You can mask this in Safari and Chrome using the -webkit-mask CSS3 property like so (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')" />

However, to do a cross-browser implementation your mask will need alpha transparency in the black section of your .png image and then overlay the mask using CSS position.

这篇关于屏蔽图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！