Свойство filter позволяет применить различные художественные эффекты к элементам. Обычно используется для изображений, чтобы размыть их, увеличить контрастность, преобразовать в чёрно-белую картинку и др.
CSS синтаксис
Возможные значения
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Эффекты не применяются. |
| blur(px) | Задаёт размытие по Гауссу изображений, фоновых картинок или текста. Чем больше значение, тем сильнее эффект размытия. Если значение не указано, то используется значение 0. |
| brightness(%) | Понижает или повышает яркость изображений или фоновых картинок. 0% сделает избражение полностью черным, 100% - значение по умолчанию и представляет оригинальное изображение. Значения больше 100% увеличивают яркость изображения. |
| contrast(%) | Понижает или повышает контрастность изображений или фоновых картинок. Значение 100% или 1 оставляет изображение исходным. Любые значения меньше 100% (или меньше 1) понижают контрастность изображения. При этом 0 даёт однотонную серую картинку. Значения больше 100% (или больше 1) повышают контрастность изображения. Отрицательное значение не допускается. Пустое значение воспринимается как 1 |
| drop-shadow(x-сдвиг y-сдвиг размытие цвет) | Добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом. Параметры: x-сдвиг - Обязательный параметр. Смещение тени по горизонтали относительно картинки. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное - влево. y-сдвиг - Обязательный параметр. Смещение тени по вертикали относительно картинки. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. размытие - Необязательный параметр. Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой. цвет - Необязательный параметр. Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная. При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color. |
| grayscale(%) | Преобразует цвета изображения в граации серого. 0% (или 0) - значение по умолчанию, представляющее исходное изображение. 100% (или 1) сделает изображение полностью черно-белым. Отрицательные значения запрепщены. |
| hue-rotate(градус) | Применяет к изображению цветовой сдвиг. В качестве значения указывается угол (к примеру: 45deg), который задаёт поворот оттенка на цветовом круге. Минимальное значение 0, максимальное 360 градусов. |
| invert(%) | Инвертирует цвета в изображении. По результату данный фильтр схож с преобразованием изображения в негатив. 0% (или 0) - значение по умолчанию, представляющее исходное изображение. 100% (или 1) - полная инверсия цветов изображения. Отрицательные значения запрепщены. |
| opacity(%) | Устанавливает степень прозрачности изображения. Похож на свойство opacity, однако некоторые браузеры для фильтров применяют аппаратное ускорение, чтобы повысить их производительность. 0% (или 0) - изображение полностью прозрачно. 100% (или 1) - значение по умолчанию, представляющее исходное изображение (прозрачность осутствует). Отрицательные значения запрещены. |
| saturate(%) | Изменяет насыщенность цветов в изображении. Значение 0% (или 0) полностью убирает насыщенность цветов в изображении, превращая его в чёрно-белое. Значение 100% (или 1) оставляет изображение неизменным. Любые значения больше 100% или больше 1 делают цвета в изображении более насыщенными. Отрицательные значения запрепщены. |
| sepia(%) | Преобразует изображение в сепию (чёрно-белое изображение с коричневым оттенком). Сепия придаёт фотографиям старинный вид. 0% (или 0) - значение по умолчанию, представляющее исходное изображение. 100% (или 1) - полностью превращает изображение в сепию. Отрицательные значения запрепщены. |
| url(URL) | Функция url() принимает в качестве параметра ссылку на XML файл, определяющий SVG фильтр. При этом может включать анкор, указывающий на элемент фильтра. Например, filter: url(svg-url#element-id). |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Изменить цвет всех изображений на черно-белый (100% градации серого)
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
