当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Masking an Image

问题描述:

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.

网友答案:

Are you trying to achieve this? 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;}
分享给朋友:
您可能感兴趣的文章:
随机阅读: