Свойство filter в CSS

  • предыдущая страница empty-cells
  • Следующая страница flex

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

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

Дополнительная информация:

Учебник CSS:CSS изображения

Руководство по HTML DOM:Свойство filter

Пример

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

img {
  filter: grayscale(100%);
}

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

Совет:Более подробные примеры TIY можно найти в нижней части страницы.

CSS грамматика

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Совет:Для использования нескольких фильтров разделите их пробелом (смотрите примеры ниже).

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

Значение по умолчанию: none
Инклюзия: Нет
Создание анимации: Поддержка. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.filter="grayscale(100%)"

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

Примечание:Используйте процентные значения (например, 75%) для фильтров, также принимаются десятичные значения (например, 0.75).

Фильтр Описание
none Значение по умолчанию. Определяет отсутствие эффекта.
blur(px)

Применение эффекта размытия к изображению. Более высокое значение приведет к более сильному размытию.

Если указано значение, используется 0.
brightness(%)

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

  • 0% сделает изображение полностью черным.
  • Значение по умолчанию - 100%,代表着原始 изображение.
  • Значения более 100% предоставят более яркие результаты.
contrast(%)

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

  • 0% сделает изображение полностью черным.
  • Значение по умолчанию - 100%,代表着原始 изображение.
  • Значения более 100% предоставят более контрастные результаты.
drop-shadow(h-shadow v-shadow blur spread color)

Применение тени к изображению.

Возможные значения:

  • h-shadow - обязательно. Указывает像素值 горизонтальной тени. Отрицательное значение поместит тень слева от изображения.
  • v-shadow - обязательно. Указывает像素值 вертикальной тени. Отрицательное значение поместит тень над изображением.

blur - опционально. Это третий параметр, единица измерения - пиксели. Добавляет эффект размытия тени. Чем больше значение, тем больше размытие (тень станет больше и ярче). Не допускаются отрицательные значения. Если не указан параметр, используется 0 (край тени будет очень резким).

spread - опционально. Это четвертый параметр, единица измерения - пиксели. Положительное значение приведет к расширению тени и увеличению, а отрицательное значение - к уменьшению тени. Если не указан параметр, используется 0 (тень будет такого же размера, как и элемент).

Примечание:Chrome, Safari и Opera, возможно, а также другие браузеры, не поддерживают четвертый размер; если добавлен, то он не будет отображаться.

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

Этот пример создает красный тень,水平和垂直方向均为 8 пикселей, с эффектом размытия 10 пикселей:

filter: drop-shadow(8px 8px 10px red);

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

Convert the image to grayscale.

  • 0% (0) является defaultValue,代表着原始图像.
  • 100% will make the image completely gray (for black and white images).

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

Apply a hue rotation to the image. This value defines the degrees of the color wheel. The default value is 0deg, representing the original image.

Примечание:The maximum value is 360deg.
invert(%)

Invert the samples in the image.

  • 0% (0) является defaultValue,代表着原始图像.
  • 100% will invert the image completely.

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

Set the opacity level of the image. opacity-level describes the transparency level, where:

  • 0% is completely transparent.
  • 100% (1) is default and represents the original image (opaque).

Примечание:Запрещены отрицательные значения.

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

Set the saturation of the image.

  • 0% (0) will make the image completely un-saturated.
  • 100% is default and represents the original image.
  • Values over 100% provide super-saturated results.

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

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

  • 0% (0) является defaultValue,代表着原始图像.
  • 100% сделает изображение полностью коричневым.

Примечание:Запрещены отрицательные значения.
url()

Функция url() принимает положение XML файла с фильтрами SVG и может содержать ссылку на конкретный элемент фильтра. Пример:

filter: url(svg-url#element-id)
initial Set this property to its default value. See initial.
inherit Инherit this property from its parent element. See inherit.

Более сложные примеры

Пример размытия

Добавление размытия к изображению:

img {
  filter: blur(5px);
}

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

Пример размытия 2

Применение размытого фона изображения:

img.background {
  filter: blur(35px);
}

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

Пример яркости

Настройка яркости изображения:

img {
  filter: brightness(200%);
}

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

Пример контрастности

Настройка контрастности изображения:

img {
  filter: contrast(200%);
}

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

Пример тени

Применение тени к изображению:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

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

Пример градаций серого

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

img {
  filter: grayscale(50%);
}

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

Пример поворота тона

Применить поворот тона к изображению:

img {
  filter: hue-rotate(90deg);
}

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

Пример инверсии

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

img {
  filter: invert(100%);
}

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

Пример непрозрачности

Установите уровень непрозрачности изображения:

img {
  filter: opacity(30%);
}

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

Пример насыщенности

Настройте насыщенность изображения:

img {
  filter: saturate(800%);
}

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

Пример коричневато-серого цвета

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

img {
  filter: sepia(100%);
}

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

Использование нескольких фильтров

Чтобы использовать несколько фильтров, разделите их пробелом. Обратите внимание, что порядок важен (например, использование grayscale() после sepia() приведет к полному灰色的 изображению):

img {
  filter: contrast(200%) brightness(150%);
}

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

Все фильтры

Показать все функции фильтров:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

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

Поддержка браузерами

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

Числа с префиксом -webkit- указывают на первую версию, использующую префикс.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Примечание:Старые версии Internet Explorer (4.0 до 8.0) поддерживают устаревшие нестандартные атрибуты "filter". При необходимости поддержки IE8 и более ранних версий, они主要用于 непрозрачность.

  • предыдущая страница empty-cells
  • Следующая страница flex