CSS webkit-альтернатива изображению-маске в JavaScript?

#html #css #webkit

#HTML #css #webkit

Вопрос:

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

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

Спасибо.

Комментарии:

1. Маска изображения PNG!? Я даже не знал, что это такая функция. 1 за доведение этого до моего сведения!

Ответ №1:

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

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

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

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

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

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

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