可以在元素上使用-webkit-mask工作（例如div）

Question

嘗試在div上使用一些CSS並將其掩蓋到特定形狀。這個概念是創建一個div，將div分隔成一個形狀（比如說一個人的輪廓）並將一些背景css漸變應用到div。基本上得到一個人的漸變輪廓，在那裏我可以通過改變css顏色來輕鬆改變顏色。

我一直在試圖-webkit-mask（如這裏看到：masking an image），但似乎無法得到它的一個DIV/SPAN工作/不管

任何人做過類似的事情？ B

Answer 1

對於跨瀏覽器兼容性，您需要以您喜歡的形狀將透明圖像創建爲透明圖像。請參閱下面的鏈接。我在Photoshop中創建了一個三角形遮罩並將其應用於圖像。

檢查在http://jsfiddle.net/39VG9/1/

Answer 2

該工作例子是only known example of -webkit-mask documentation對CSS的面具，它包含語法錯誤。官方的Safari文檔包含了一個簡單的版本。根據博客文章，複雜的webkit掩碼（使用SVG圖像）可以處理任何包裝盒內容。

面具也是SVG 1.1的一部分，但我沒有關於它們是否實際上已經正確實施（或完全）的信息。

Answer 3

是的。

<style> 
    #image { 
    mask: url(#mask); 
    -webkit-mask: url(mask.svg) top left/cover; 
    -o-mask: url(mask.svg) top left/cover; 
    -ms-mask: url(mask.svg) top left/cover; 
    } 
</style> 

http://www.html5rocks.com/en/tutorials/masking/adobe/