掩蔽影像

我試圖讓使用CSS 2個口罩這一形象，但我正在逐漸絕對行不通的。香港專業教育學院試圖利用從該頁面的代碼示例：

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

我的兩個圖像：

enter image description here

和

enter image description here

我無法得到它的爲我的生活工作。有人可以在這裏展示一個工作結果，告訴我如何正確地掩蓋圖像？

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

然而，做一個跨瀏覽器的實現你的面具將需要的黑色款Alpha透明度：

來源

2011-02-12 WillingLearner

什麼是透明色在你的面具，黑色或白色的？什麼不行？你可以顯示你現在有什麼，最好在JSFiddle？ – 2011-02-12 15:58:30

「掩蔽」是什麼意思？ – Thew 2011-02-12 15:58:57

您可以在Safari和Chrome使用像這樣的-webkit-mask CSS3屬性（see fiddle in Safari/Chrome）屏蔽此你的.png圖像，然後使用CSS位置覆蓋掩碼。

來源

2011-02-12 16:05:44 mVChr

你想達到這個目標嗎？ 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;}

來源

2011-02-12 16:12:32 Sotiris

回答

相關問題