Фильтр MaskFilter задает элементу эффект цветной маски, отображая все прозрачные пиксели заданным цветом, а непрозрачные пиксели отображая прозрачными.
Для браузеров IE 5.5-7 фильтры можно подключать в CSS документ с помощью CSS свойства filter. В IE8+ для этого предусмотрено вендорное CSS свойство -ms-filter. Причем из-за особенностей синтаксического анализатора IE8 их порядок имеет значение: -ms-filter должен идти первым.
Синтаксис
div {
-ms-filter:"progid:DXImageTransform.Microsoft.MaskFilter()";
filter:progid:DXImageTransform.Microsoft.MaskFilter();
}
Параметры отделяются друг от друга запятой. Параметр состоит из двух частей: имени параметра и его значения, разделенных знаком равно. Значение параметра может быть взято в кавычки.
Параметры фильтра
| Параметр | Описание | Возможные значения | Значение по умолчанию |
|---|---|---|---|
| enabled | флаг, управляющий фильтром |
|
true |
| color | цвет маски |
Код цвета записывается в формате #AARRGGBB, где AA — альфа-канал (00 — абсолютно прозрачный, FF — абсолютно непрозрачный, т.е. 256 уровней прозрачности тени), RRGGBB — обычная RGB запись цвета. |
#FF000000 |
Примеры
Элемент с полупрозрачной (альфа-канал 80) маской красного цвета:
div {
-ms-filter:"progid:DXImageTransform.Microsoft.MaskFilter(color=#80FF0000)";
filter:progid:DXImageTransform.Microsoft.MaskFilter(color=#80FF0000);
}
Заметки
Аналогичный эффект можно получить, применив к элементу фильтр BasicImage, но с BasicImage этого эффекта нельзя добиться не используя скрипты.