Может -webkit-mask работать с элементом (например, div)

Question

Попытка использовать CSS для div и замаскировать его под конкретную форму.Идея состоит в том, чтобы создать элемент div, маску, которая делится на фигуру (скажем, силуэт человека), и применять некоторые градиенты css фона к элементу div.По сути, получение градиентного силуэта человека, где я могу легко менять цвета, меняя цвета CSS.

Я пытался -webkit-mask (как видно здесь: маскировка изображения ) но не могу заставить его работать над div / span / чем угодно

Кто-нибудь делал что-нибудь подобное?B

Answer 1

Для кросс-браузерной совместимости вам необходимо создать маску в виде прозрачного изображения в нужной вам форме.Смотрите мою ссылку ниже.Я создал треугольную маску в фотошопе и применил ее к изображению.

Проверьте рабочий пример на http://jsfiddle.net/39VG9/1/

Answer 2

Это единственный известный пример документации -webkit-mask для масок CSS, содержащий синтаксические ошибки.Официальная документация Safari содержит скрытую версию этого.Согласно сообщению в блоге, сложные маски webkit (с использованием изображений SVG) могут работать с любым содержимым блока.

Маски также являются частью SVG 1.1, но у меня нет информации о том, действительно ли они были реализованы правильно (илисовсем).

Answer 3

Да.

<style>
  #image {
    mask: url(#mask);
    -webkit-mask: url(mask.svg) top left / cover;
    -o-mask: url(mask.svg) top left / cover;
    -ms-mask: url(mask.svg) top left / cover;
  }
</style>

http://www.html5rocks.com/en/tutorials/masking/adobe/