Свойство стиля filter

Определение и использование

filter Свойство добавляет визуальные эффекты к изображению (например, размытие и насыщенность).

См. также:

CSS справочник:Свойство фильтра

Пример

Изменить цвет изображения на черно-белый (100% серого):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Попробуйте сами

Синтаксис

Возврат свойства фильтра:

объект.style.filter

Установка свойства фильтра:

объект.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Функция фильтра

Комментарий：Фильтр, использующий百分比 (например, 75%), также принимает десятичные значения (т.е. 0,75).

Фильтр Описание
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, возможно, а также другие браузеры, не поддерживают четвертый размер; если добавлен, он не будет отображаться.

color- опционально. Добавить цвет к тени. Если не указано, цвет зависит от браузера (обычно черный).

Совет：Этот фильтр похож на атрибут тени.
grayscale(%)

Преобразовать изображение в градации серого.

0% (0) - это значение по умолчанию, представляющее оригинальное изображение.

100% сделает изображение полностью серым (для черно-белых изображений).

Комментарий：Запрещены отрицательные значения.
hue-rotate(deg)

Применить поворот тона к изображению. Это значение определяет градусы, на которые будут корректироваться образцы изображения вокруг цветового кольца.

0deg - это значение по умолчанию, представляющее оригинальное изображение.

Комментарий：Максимальное значение - 360 градусов.
invert(%)

Инвертировать образцы в изображении.

0% (0) - это значение по умолчанию, представляющее оригинальное изображение.

100% сделает изображение полностью инвертированным.

Комментарий：Запрещены отрицательные значения.
opacity(%)

Установить уровень непрозрачности изображения. Уровень непрозрачности описывает уровень прозрачности, где:

0% - это полностью прозрачное.

100% (1) - это значение по умолчанию, представляющее оригинальное изображение (без прозрачности).

Комментарий：Запрещены отрицательные значения.

Совет：Этот фильтр похож на атрибут непрозрачности.
saturate(%)

Регулировка насыщенности изображения.

0% (0) сделает изображение полностью несыщенным.

100% - это значение по умолчанию, представляющее оригинальное изображение.

Значения, превышающие 100%, будут предоставлять перегруженные результаты.

Комментарий：Запрещены отрицательные значения.
sepia(%)

Преобразовать изображение в коричневый цвет.

0% (0) - это значение по умолчанию, представляющее оригинальное изображение.

100% сделает изображение полностью коричневым.

Комментарий：Запрещены отрицательные значения.

Технические детали

Версия CSS: CSS3

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0