Creating a transparency mask for html.

Question

Has anyone come across an effective way to mimic Webkit's

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

functionality?

I'm trying to use non-square animated elements, and would prefer not having to do the masking on server-side.

I'm set on supporting at least Gecko and Webkit, but if I can manage Opera and IE, that would be a bonus.

Answer 1

After Googling a lot, seems there is no way to do this with anything other than webkit at the moment. Just pre-mask your images in Photoshop for now :)

Answer 2

Put a div containing transparent images with higher z-index absolutely positioned over the top of the animations?

Just a thought, might be completely useless for what you need.

<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;}