Фильтр Compositor
Фильтр Compositor отображает содержимое элемента как логическую комбинацию цветов и прозрачности оригинального и нового контента, создавая тем самым статическую переходную картинку.
Для браузеров IE 5.5-7 фильтры можно подключать в CSS документ с помощью CSS свойства filter. В IE8+ для этого предусмотрено вендорное CSS свойство -ms-filter. Причем из-за особенностей синтаксического анализатора IE8 их порядок имеет значение: -ms-filter должен идти первым.
Синтаксис
div {
-ms-filter:"progid:DXImageTransform.Microsoft.Compositor()";
filter:progid:DXImageTransform.Microsoft.Compositor();
}
Параметры отделяются друг от друга запятой. Параметр состоит из двух частей: имени параметра и его значения, разделенных знаком равно. Значение параметра может быть взято в кавычки.
Параметры фильтра
| Параметр |
Описание |
Возможные значения |
Значение по умолчанию |
| function |
определяет логическую операцию для получения результирующего изображения |
- 0 — CLEAR. Не производится никаких действий (в результате не получаем ничего)
- 1 — MIN. Сравниваем яркость каждого пикселя в обоих изображениях, и выбираем из каждой пары менее яркий
- 2 — MAX. Сравниваем яркость каждого пикселя в обоих изображениях, и выбираем из каждой пары более яркий
- 3 — A. Отображаем только оригинальный контент
- 4 — A OVER B. Отображаем оригинальный контент, сквозь полупрозрачные участки которого видно новый контент, лежащий под ним
- 5 — A IN B. Отображаем только оригинальный контент, попадающий в область непрозрачных пикселей нового контента (при этом новый контент не отображается вовсе)
- 6 — A OUT B. Отображаем только оригинальный контент, не попадающий в область непрозрачных пикселей нового контента (при этом новый контент не отображается вовсе)
- 7 — A ATOP B. В пределах области непрозрачных пикселей нового контента, показываем оригинальный контент сквозь полупрозрачные участки которого видно новый контент, лежащий под ним
- 8 — A SUBTRACT B. Отображаем только оригинальный контент, но для каждого пикселя определяется результирующей цвет (A минус B), при этом прозрачность остается как у оригинального контента
- 9 — A ADD B. Отображаем только оригинальный контент, но для каждого пикселя определяется результирующей цвет (A плюс B), при этом прозрачность остается как у оригинального контента
- 10 — A XOR B. Отображаем только оригинальный контент, не попадающий в область непрозрачных пикселей нового контента и новый контент, не попадающий в область непрозрачных пикселей оригинального контента (область пересечения остается пустой)
- 19 — B. Отображаем только новый контент
- 20 — B OVER A. Отображаем новый контент, сквозь полупрозрачные участки которого видно оригинальный контент, лежащий под ним
- 21 — B IN A. Отображаем только новый контент, попадающий в область непрозрачных пикселей оригинального контента (при этом оригинальный контент не отображается вовсе)
- 22 — B OUT A. Отображаем только новый контент, не попадающий в область непрозрачных пикселей оригинального контента (при этом оригинальный контент не отображается вовсе)
- 23 — B ATOP A. В пределах области непрозрачных пикселей оригинального контента, показываем новый контент контент сквозь полупрозрачные участки которого видно оригинальный контент, лежащий под ним
- 24 — B SUBTRACT A. Отображаем только новый контент, но для каждого пикселя определяется результирующей цвет (В минус А), при этом прозрачность остается как у нового контента
- 25 — B ADD A. Отображаем только новый контент, но для каждого пикселя определяется результирующей цвет (В плюс А), при этом прозрачность остается как у нового контента
|
0 |
С помощью скриптов можно применять и включать переход для элемента.
Пример
Элемент для которого в переходной картинке будет изображен новый контент, сквозь полупрозрачные участки которого будет видно оригинальный контент.
div {
-ms-filter:"progid:DXImageTransform.Microsoft.Compositor(function=20)";
filter:progid:DXImageTransform.Microsoft.Compositor(function=20);
}
Фильтр не управляет переходами между значениями, а только указывает, как именно отображать переходную картинку. Управлять самим изменением контента элемента можно только с помощью скриптов.
