Альтернатива CSS webkit-image-mask в JavaScript?

Question

Я работаю над своим портфолио, и я хотел бы замаскировать некоторые изображения PNG, это работает с маской изображений webkit, но я хотел бы получить тот же результат в FF & Opera, знаете ли вы JavaScriptсценарий, чтобы получить тот же результат?

Я пытался с edge.js, но работать только с <img></img>, а не с фоном в CSS (я сделал спрайт).

Спасибо.

Answer 1

Почему бы просто не отобразить PNG поверх вашего изображения?

Вы можете создать элемент в HTML после вашего изображения или создать его динамически с помощью JS.

Просто создать DIVи поместите его поверх вашего изображения, а затем присвойте ему ту же ширину и высоту, что и ваше изображение (или что угодно) и ваш PNG в качестве фонового изображения div, и все это с помощью CSS.

также используйте псевдокласс CSS ::after для стилизации элемента, даже не вставляя его в DOM через HTML или JS.

http://jsfiddle.net/LuSYQ/1/

И альтернатива ::after

http://jsfiddle.net/LuSYQ/11/