Главная/ Cправочник HTML, CSS, Javascript/ CSS расширения/ Webkit/ Properties/ CSS свойство -webkit-mask-image

CSS свойство -webkit-mask-image

Свойство -webkit-mask-image задает изображение, которое будет применено к элементу в качестве маски.

Маска применяется для скрытия некоторых частей элемента.

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

Допустимые значения

  • url — путь к файлу-картинке для маски. Указывается в скобках и в кавычках (одинарных или двойных). Для сокращения объема кода, кавычки можно не ставить
  • — задает градиент элементу (в качестве маски имеет смысл задавать только полупрозрачные градиенты, поскольку она влияет на прозрачность элемента, а не на его цвет)
Значение по умолчанию нет
Применимо ко всем элементам
Наследование да
Поддерживается браузерами
  • Safari 4.0 и выше
  • Chrome 3.0 и выше

Пример

CSS

div {
background-color:#ccc;
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
}

По теме

Теги: , , , ,