为 html 创建透明蒙版答案

【问题标题】：Creating a transparency mask for html为 html 创建透明蒙版
【发布时间】：2010-09-08 18:34:15
【问题描述】：

有没有人遇到过模仿Webkit的有效方法

-webkit-mask-box-image: url(filename.png)

功能？

我正在尝试使用非方形动画元素，并且希望不必在服务器端进行遮罩。

我打算至少支持 Gecko 和 Webkit，但如果我能管理 Opera 和 IE，那就太好了。

【问题讨论】：

在这里回答了类似的问题：stackoverflow.com/questions/5887527/…

标签： css image canvas masking

【解决方案1】：

在Googling 很多之后，目前除了 webkit 之外似乎没有其他方法可以做到这一点。现在只需在 Photoshop 中预先屏蔽您的图像 :)

【讨论】：

这几乎是我得出的结论——在 Photoshop 中预先遮罩不是一个选项，因为它是用户提交的图像，它会在 imagemagick 或类似中留下遮罩。谢天谢地，我想要遮盖的形状只是简单的几何图形，所以我选择使用 canvas 和 clip() 命令。
嗯，那是一个更好的主意:)

【解决方案2】：

将包含具有较高 z-index 的透明图像的 div 绝对定位在动画的顶部？

只是一个想法，对于你需要的东西可能完全没用。

<div class="animation">
</div>
<div class="mas">
</div>

.animation{height: 200px; width: 200px; position: absolute; top: 0; left: 0;}
.mask{height: 200px; width: 200px; position: absolute; top: 0; left: 0; z-index: 10; background: transparent url('mask.png') 0 0 no-repeat;}

【讨论】：