Фильтр BasicImage регулирует отображение цветов элемента, зеркальное отображение элемента, поворот и прозрачность контента элемента.
Для браузеров IE 5.5-7 фильтры можно подключать в CSS документ с помощью CSS свойства filter. В IE8+ для этого предусмотрено вендорное CSS свойство -ms-filter. Причем из-за особенностей синтаксического анализатора IE8 их порядок имеет значение: -ms-filter должен идти первым.
Синтаксис
div {
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage()";
filter:progid:DXImageTransform.Microsoft.BasicImage();
}
Параметры отделяются друг от друга запятой. Параметр состоит из двух частей: имени параметра и его значения, разделенных знаком равно. Значение параметра может быть взято в кавычки.
Параметры фильтра
| Параметр | Описание | Возможные значения | Значение по умолчанию |
|---|---|---|---|
| enabled | флаг, управляющий фильтром |
|
true |
| grayScale | флаг, указывающий, будет ли контент отображаться в нормальной RGB гамме или в оттенках серого цвета, усредняя значения RGB цветов |
|
0 |
| invert | флаг, указывающий, будет ли контент отображаться в нормальной RGB гамме или каждый цвет будет инвертирован |
|
0 |
| mirror | флаг, определяющий, будет ли контент элемента отображаться нормально или зеркально |
|
0 |
| opacity | определяет прозрачность контента элемента |
|
1.0 |
| rotation | определяет поворот элемента с шагом 90 градусов |
|
1.0 |
| XRay | флаг определяющий, будет ли контент элемента отображаться в нормальной RGB гамме или в оттенках серого определяющихся из зеленой и красной составляющих цвета. Создает эффект рентгеновского снимка |
|
0 |
Этот фильтр имеет еще некоторые параметры (маска и цвет маски), но их можно задавать только с помощью скриптов.
Примеры
Непрозрачный элемент показанный как будто на рентгеновском снимке (XRay=1) и повернутый на 90 градусов по часовой стрелке:
div {
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(XRay=1, rotation=1)";
filter:progid:DXImageTransform.Microsoft.BasicImage(XRay=1, rotation=1);
}
Элемент с прозрачностью 0.5 отраженный зеркально и показанный в оттенках серого (grayScale=1) .
div {
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(opacity=0.5, mirror=1, grayScale=1)";
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.5, mirror=1, grayScale=1);
}