filter
Поддержка браузерами
| 13.0+ | 35.0+ | 53.0+ | 40.0+ | 9.1+ |
Описание
CSS свойство filter добавляет визуальные эффекты (такие как размытие или насыщенность) к элементу. Чаще всего filter используется с элементом <img>.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.WebkitFilter="none"; |
Синтаксис
filter: filter-function [filter-function]* | none;
Значения свойства
Для функции, принимающих значения в процентах (например, 35%), можно задавать значения и в десятичных дробях (например, 0,35). В этом случае 100% будет соответствовать число 1.
| Значение | Описание |
|---|---|
| none | Значение по умолчанию: визуальные эффекты не применены. |
| blur(px) | Применяет к исходному изображению эффект размытия. Чем больше заданное значение, тем больше размоется картинка. Если значение не задано, то по умолчанию используется 0. |
| brightness(%) | Изменяет яркость изображения. Значение 0% снижает яркость картинки до 0, и она становится полностью чёрной. Значение 100% (1) является значением по умолчанию, то есть представляет собой исходную яркость изображения. Все значения больше 100% обеспечивают добавления яркости. |
| contrast(%) | Изменяет контрастность изображения. Значение 0% выводит полностью чёрное изображение. Значение 100% (1) является значением по умолчанию, то есть представляет собой исходную контрастность изображения. Все значения больше 100% обеспечивают уменьшение контрастности. |
| drop-shadow() | Добавляет тень к изображению. Функция принимает теже параметры, что и свойство box-shadow, за исключение значения inset. Полный синтаксис функции выглядит так:
drop-shadow(смещение-x смещение-y размытие размер цвет);Первые два параметра являются обязательными, например, код для небольшой синий тени будет выглядеть так: drop-shadow(2px 2px blue); |
| grayscale(%) | Заменяет исходные цвета изображения на серые оттенки. Значение по умолчанию 0%, то есть представляет собой исходное изображение. Значение 100% делает изображение чёрно-белым. |
| hue-rotate(deg) | Представляет собой цветовой круг, с помощью которого изменяются исходные оттенки изображения. Значение задаётся в градусах, которые показывают угол изменения исходных оттенков в цветовом круге. Значение по умолчанию 0deg, соответствует исходному изображению. Желательное максимально значение 360deg, так как значения больше 360deg будут уже описывать круг повторно. |
| invert(%) | Инвертирует цвета изображения. Значение по умолчанию 0%, соответствует исходному изображению. Максимально значение 100%, обозначает полную инверсию картинки. |
| opacity(%) | Задаёт непрозрачность для изображения. Значение 0% делает изображение полностью прозрачным, 100% - полностью непрозрачное изображение. Работа этой функции подобна работе свойства opacity. |
| saturate(%) | Регулирует насыщенность изображения. Значение 0% полностью убирает насыщенность, значение 100% представляет собой исходное изображение (является значение по умолчанию). Значения больше 100% добавляют насыщенность. |
| sepia(%) | Преобразует изображение в сепию. 0% (значение по умолчанию) - исходное изображение, 100% - полная сепия. |
| url() | Принимает адрес XML-файла, который указывает на SVG фильтр и может включать в себя якорь определенного фильтра.
url(svr_url#id5) |
Пример
CSS Свойство:
filter:
Результат:
CSS Код:
img {
filter: blur(2px);
}
filter: blur(2px);
}