为html创建透明蒙版

时间:2010-09-08 07:07:57

标签: css image canvas masking

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

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

功能

我正在尝试使用非方形动画元素,并且不希望在服务器端进行屏蔽。

我开始支持至少Gecko和Webkit,但如果我可以管理Opera和IE,那将是一个奖励。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

将包含较高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;}