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);
}

Фильтр не управляет переходами между значениями, а только указывает, как именно отображать переходную картинку. Управлять самим изменением контента элемента можно только с помощью скриптов.