Графические изображения

Фильтры

Фильтры являются настройками стиля, которые применяются к изображению для изменения его визуального представления. Существуют различные фильтры для изменения уровней плотности цвета, расплывчатости изображений, создания зеркальных изображений, выпуклых и гравированных изображений, создания теней и для применения других специальных эффектов к содержимому страницы Web. Фильтры используют с помощью свойства filter, общая форма которого показана в листинге 5.7.

filter:filtername (property=value [, property=value]...)

За именем фильтра filtername следует разделенный запятыми и заключенный в скобки список настроек property=value. Различные фильтры требуют различных свойств, в зависимости от нужного эффекта. Эти свойства будут указаны во время рассмотрения отдельных фильтров.

Рис. 5.23. Исходные изображения

Исходные изображения, показанные на рисунке 5.23, используются для иллюстрации эффектов различных фильтров. Можно будет сравнить эти изображения с теми, которые создаются различными фильтрами.

Здесь описаны не все доступные фильтры. Некоторые из них требуют специального программирования для реализации этих эффектов, а программирование стилей находится за рамками этого учебника. Рассмотренные фильтры достаточно легко применяются с базовыми настройками таблицы стилей. Все настройки стилей показаны как линейные таблицы стилей, чтобы сохранить кодирование локальным. Можно, конечно, применять фильтры со встроенными или внешними таблицами стилей.

Фильтр alpha()

Фильтр alpha() является ссылкой на альфа-канал изображения, который используется для управления плотностью или прозрачностью изображения. Существует четыре стиля alpha, каждый из которых производит различные эффекты или обесцвечивание изображения от полной до частичной интенсивности. Эти четыре варианта фильтров alpha - uniform, linear, radial, и rectangular - представлены в таблице 5.4.

filter:alpha()

style=0 (uniform)
opacity=n

style=1 (linear)
opacity=n
finishOpacity=n
startX=n
finishX=n
startY=n
finishY=n

style=2 (radial)
opacity=n

style=3 (rectangular)
opacity=n

Равномерный фильтр alpha()

Равномерный фильтр alpha (uniform) применяет один уровень плотности для всего изображения. Он выводит изображение с определенным процентом плотности: от 100% плотности, как в исходном изображении, и до плотности 0%, создающей вообще невидимое изображение.

Для этого фильтра требуются два значения свойства. Свойство style=0 определяет равномерный стиль альфа; свойство opacity=n задает уровень плотности ( n ) как процент от полной интенсивности. Результат применения альфа-фильтра к тегу <img/> можно видеть на рисунке 5.24. Его плотность задана как 50, то есть изображение выводится с 50% от полной интенсивности.

<img src="GallatinValley.jpg" style="filter:alpha(style=0, opacity=50)"/>

Рис. 5.24. Изображение с равномерной плотностью 50%

Линейный фильтр alpha()

Линейный фильтр alpha осветляет изображение от начальной заданной плотности до конечной плотности, применяя операцию по горизонтали или по вертикали. Требуется задание пяти свойств. Свойство style=1 определяет линейный фильтр альфа. Свойство opacity=n задает начальный процент плотности; свойство finishOpacity=n задает конечный процент плотности. Оставшиеся два свойства определяют горизонтальное или вертикальное направление применения фильтра. Пара свойств startX=n и finishX=n задают начальную и конечную точки приложения горизонтального осветления, где n является процентом расстояния от левого края изображения. Пара свойств startY=n и finishY=n задают начальную и конечную точки для применения вертикального осветления, где n является процентом расстояния от верхнего края изображения.

Типичное приложение этого фильтра начинает обесцвечивание при startX=0 (левый край изображения) и заканчивает осветление при finishX=100 (правый край изображения). Эти свойства приведены в следующей таблице стилей для изображения, показанного на рисунке 5.25.

<img src="GallatinValley.jpg" style="filter:alpha(style=1, opacity=100, 
finishOpacity=0, startX=0, finishX=100)"/>

Рис. 5.25. Изображение с линейной плотностью от 100% до 0%

Можно варьировать направление градиента осветления, изменяя на дополнительные значения начального и конечного процентов. То есть, задание startX=100 и finishX=0 осветляет изображение справа налево. Можно также осветлять изображение сверху вниз, используя свойства startY и finishY вместо startX и finishX.

Радиальный фильтр alpha()

Радиальный фильтр альфа осветляет изображение круговым образом по радиусам из середины наружу. Он требует задания только двух свойств. Свойство style=2 определяет радиальный фильтр; свойство opacity=n задает процент начальной плотности в центре изображения. Начиная с начальной плотности, изображение осветляется до его краев, создавая круговое изображение.

Следующий код используется для создания изображения на рисунке 5.26. Оно начинает градиент со 100% плотности в центре изображения.

<img src="GallatinValley.jpg" style="filter:alpha(style=2, 
opacity=100)"/>

Рис. 5.26. Изображение с радиальной плотностью от 100% до 0%