Фильтр Alpha
Фильтр Alpha регулирует степень прозрачности контента элемента.
Для браузеров IE 5.5-7 фильтры можно подключать в CSS документ с помощью CSS свойства filter. В IE8+ для этого предусмотрено вендорное CSS свойство -ms-filter. Причем из-за особенностей синтаксического анализатора IE8 их порядок имеет значение: -ms-filter должен идти первым.
Синтаксис
div { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha()"; filter:progid:DXImageTransform.Microsoft.Alpha(); }
Параметры отделяются друг от друга запятой. Параметр состоит из двух частей: имени параметра и его значения, разделенных знаком равно. Значение параметра может быть взято в кавычки.
Параметры фильтра
Параметр | Описание | Возможные значения | Значение по умолчанию |
---|---|---|---|
enabled | флаг, управляющий фильтром |
|
true |
style | определяет тип прозрачности |
|
0 |
opacity | определяет прозрачность в начальной точке градиента (в процентах). При равномерной прозрачности (style=0) определяет прозрачность контента элемента во всех точках. |
|
0 |
finishOpacity | определяет прозрачность в конечной точке градиента (в процентах). Не применяется, когда прозрачность равномерная (style=0) |
|
0 |
startX | определяет координату x точки начала градиента в процентах от ширины элемента. Применяется только тогда, когда прозрачность изменяется в виде линейного градиента (style=1) | 0 — 100 | 0 |
startY | определяет координату y точки начала градиента в процентах от высоты элемента. Применяется только тогда, когда прозрачность изменяется в виде линейного градиента (style=1) | 0 — 100 | 0 |
finishX | определяет координату x точки конца градиента в процентах от ширины элемента. Применяется только тогда, когда прозрачность изменяется в виде линейного градиента (style=1) | 0 — 100 | 0 |
finishY | определяет координату y точки конца градиента в процентах от высоты элемента. Применяется только тогда, когда прозрачность изменяется в виде линейного градиента (style=1) | 0 — 100 | 0 |
Примеры
Равномерная прозрачность 50%, фильтр отключен.
div { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50, enabled=false)"; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50, enabled=false); }
Прозрачность изменяется линейно от 0% до 100%, от точки с координатами (20%;10%) от размеров элемента до точки с координатами (80%;70%) от размеров элемента.
div { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(style=1, opacity=0, finishOpacity=100, startX=20, finishX=80, startY=10, finishY=70)"; filter:progid:DXImageTransform.Microsoft.Alpha(style=1, opacity=0, finishOpacity=100, startX=20, finishX=80, startY=10, finishY=70); }
Прозрачность изменяется радиально от 100% в центре до 0% по краям элемента.
div { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(style=2, opacity=100, finishOpacity=0)"; filter:progid:DXImageTransform.Microsoft.Alpha(style=2, opacity=100, finishOpacity=0); }
По теме
- кроссбраузерная CSS прозрачность
- CSS свойство opacity
- CSS свойство -moz-opacity
- Полупрозрачное затемнение фона
- Баг в IE с текстом при применении Alpha фильтра