-webkit-mask可以处理一个元素（例如div）

Question

尝试在div上使用一些CSS并将其屏蔽到特定形状。这个概念是创建一个div，将其划分为一个形状（比如一个人的轮廓）并将一些背景css渐变应用于div。基本上是获得一个人的渐变轮廓，我可以通过改变css颜色轻松改变颜色。

我一直在尝试-webkit-mask（如此处所见：masking an image）但似乎无法让它在div / span /无论什么

有人做过类似的事吗？ 乙

Answer 1

对于跨浏览器兼容性，您需要将蒙版创建为您喜欢的形状的透明图像。请参阅下面的链接。我在photoshop中创建了一个三角形蒙版并将其应用于图像。

检查http://jsfiddle.net/39VG9/1/

处的工作示例

Answer 2

这是CSS掩码的only known example of -webkit-mask documentation，它包含语法错误。官方的Safari文档包含了一个愚蠢的版本。根据博客文章，复杂的webkit掩码（使用SVG图像）可以处理任何盒子内容。

Masks也是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/