Свойство filter
Пример style.filter
Измените цвет изображения на черно-белый (100% оттенки серого):
document.getElementById("myImg").style.filter = "grayscale(100%)";
Попробуйте сами »
Описание filter
Свойство filter добавляет к изображениям визуальные эффекты (например, размытие и насыщенность).
Поддержка filter
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает данное свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| filter | 53.0 | 13.0 | 35.0 | 9.1 | 40.0 |
Синтаксис filter
Вернуть свойство filter:
object.style.filter
Установите свойство filter:
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
Функции filter
Примечание: Фильтры, использующие процентные значения (например, 75%), также принимают значение в десятичном виде (например, 0,75).
| filter | Описание |
|---|---|
| none | Не определяет никаких эффектов |
| blur(px) | Применяет эффект размытия к изображению. Большее значение создаст большее размытие. Если значение не указано, используется 0. |
| brightness(%) | Регулирует яркость изображения. 0% сделает изображение полностью черным. 100% (1) — значение по умолчанию, представляющее исходное изображение. Значения выше 100% дадут более яркие результаты. |
| contrast(%) | Регулирует контрастность изображения. 0% сделает изображение полностью черным. 100% (1) — значение по умолчанию, представляющее исходное изображение. Значения выше 100% дадут результаты с меньшей контрастностью. |
| drop-shadow(h-shadow v-shadow blur spread color) | Применяет эффект тени к изображению. Возможные значения: h-shadow — обязательно. Указывает значение в пикселях для горизонтальной тени. Отрицательные значения помещают тень слева от изображения. v-shadow — обязательно. Указывает значение в пикселях для вертикальной тени. Отрицательные значения помещают тень над изображением. blur — необязательно. Это третье значение, и должно быть в пикселях. Добавляет эффект размытия к тени. Большее значение создаст большее размытие (тень станет больше и светлее). Отрицательные значения не допускаются. Если значение не указано, используется 0 (край тени будет резким). spread — необязательно. Это четвертое значение, и должно быть в пикселях. Положительные значения заставят тень расширяться и становиться больше, а отрицательные значения заставят тень сжиматься. Если не указано, будет 0 (тень будет того же размера, что и элемент). Примечание: Chrome, Safari и Opera, а также, возможно, другие браузеры не поддерживают эту четвертую длину; она не будет отображаться, если добавлена. цвет: Необязательно. Добавляет цвет к тени. Если не указано, цвет зависит от браузера (часто черный). Совет: Этот фильтр похож на свойство box-shadow. |
| grayscale(%) | Преобразует изображение в оттенки серого. 0% (0) — значение по умолчанию, представляющее исходное изображение. 100% сделает изображение полностью серым (используется для черно-белых изображений). Примечание: отрицательные значения не допускаются. |
| hue-rotate(deg) | Применяет поворот оттенка к изображению. Значение определяет количество градусов вокруг цветового круга, на которое будут скорректированы образцы изображения. 0 градусов — значение по умолчанию, представляющее исходное изображение. Примечание: Максимальное значение — 360 градусов. |
| invert(%) | Инвертирует образцы в изображении. 0% (0) — значение по умолчанию, представляющее исходное изображение. 100% сделает изображение полностью инвертированным. Примечание: отрицательные значения не допускаются. |
| opacity(%) | Устанавливает уровень непрозрачности для изображения. Уровень непрозрачности описывает уровень прозрачности, где: 0% — полная прозрачность. 100% (1) — значение по умолчанию, представляющее исходное изображение (без прозрачности). Примечание: Отрицательные значения не допускаются. Совет: Этот фильтр похож на свойство непрозрачность. |
| saturate(%) | Насыщает изображение. 0% (0) сделает изображение полностью ненасыщенным. 100% — это значение по умолчанию, которое представляет исходное изображение. Значения свыше 100% обеспечивают сверхнасыщенные результаты. Примечание: отрицательные значения не допускаются. |
| sepia(%) | Преобразует изображение в сепию. 0% (0) — значение по умолчанию, представляющее исходное изображение. 100% сделает изображение полностью сепией. Примечание: отрицательные значения не допускаются. |
Технические детали filter
| CSS Версия | CSS3 |
|---|
Связанные страницы filter
CSS Справочник: Свойство filter