Создание маски прозрачности для HTML

Question

Кто-нибудь сталкивался с эффективным способом имитации Webkit's

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

функциональность

Я пытаюсь использовать не квадратные анимированные элементы и предпочел бы не делать маскировку на стороне сервера.

Я настроен на поддержку как минимум Gecko и Webkit, но если я смогу управлять Opera и IE, это будет бонусом.

Answer 1

Поместить элемент div, содержащий прозрачные изображения с более высоким z-индексом, абсолютно поверх анимации?

Просто мысль, может быть совершенно бесполезной для того, что вам нужно.

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

Answer 2

После Googling , кажется, в настоящее время нет способа сделать это с помощью чего-либо, кроме webkit.Просто предварительно замаскируйте ваши изображения в Photoshop сейчас:)