Перейти к содержанию

filter

Свойство filter предназначено для применения художественных эффектов к элементам.

Обычно используется для изображений, чтобы размыть их, увеличить контрастность, преобразовать в чёрно-белую картинку и др.

Демо

Изображения, фильтры, композиция

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* URL to SVG filter */
filter: url('filters.svg#filter-id');

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

Значения

<фильтр>
фильтр.
none
Отменяет действие наложенных фильтров.

Фильтр — это функция, которая позволяет изменять вид изображения, применяя к нему разные эффекты, вроде контрастности, яркости, преобразования в чёрно-белую картинку и др.

blur()

Функция blur() задаёт размытие по Гауссу изображений, фоновых картинок или текста. К элементу <body> напрямую применить размытие нельзя, только к его потомкам.

Синтаксис

1
filter: blur(<размер>);

Значения

В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS (к примеру: 5px). Чем больше значение, тем сильнее будет размыто изображение.

Отрицательное значение не допускается. Пустое значение воспринимается как 0px.

Спецификация

brightness()

Функция brightness() понижает или повышает яркость изображений или фоновых картинок.

Синтаксис

1
filter: brightness(<значение>);

Значения

Значение 100% или 1 оставляет изображение исходным. Любые значения меньше 100% (или меньше 1) понижают яркость изображения. Таким образом, 0 даёт полностью чёрную картинку. Значения больше 100% (или больше 1) повышают яркость изображения.

Отрицательное значение не допускается. Пустое значение воспринимается как 1.

Спецификация

contrast()

Функция contrast() понижает или повышает контрастность изображений или фоновых картинок.

Синтаксис

1
filter: contrast(<значение>);

Значения

Значение 100% или 1 оставляет изображение исходным. Любые значения меньше 100% (или меньше 1) понижают контрастность изображения. При этом 0 даёт однотонную серую картинку. Значения больше 100% (или больше 1) повышают контрастность изображения.

Отрицательное значение не допускается. Пустое значение воспринимается как 1.

Спецификация

drop-shadow()

Функция drop-shadow() добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Синтаксис

1
filter: drop-shadow(<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>);

Значения

<сдвиг по x>
Смещение тени по горизонтали относительно картинки. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
<сдвиг по y>
Смещение тени по вертикали относительно картинки. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
<размытие>
Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой.
<цвет>
Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная. Необязательный параметр.

При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color.

Спецификация

grayscale()

Функция grayscale() превращает изображение в чёрно-белое.

Синтаксис

1
filter: grayscale(<значение>);

Значения

Значение 100% или 1 превращает изображение в чёрно-белое. Значение 0 оставляет изображение исходно цветным. Значения меньше 100% (или меньше 1) линейно меняют цветность картинки.

Отрицательное значение не допускается. Пустое значение воспринимается как 0.

Спецификация

Примечания

  • Internet Explorer c версии 4 по 10 поддерживает другое нестандартное свойство filter с тем же именем, но другим синтаксисом.
  • Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter.

Значение по-умолчанию:

1
filter: none;

Применяется к: Ко всем элементам

Спецификации

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

Can I Use css-filters? Data on support for the css-filters feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>filter</title>
    <style>
      .bw {
        -webkit-filter: grayscale(100%);
        filter: grayscale(
          100%
        ); /* Чёрно-белое изображение */
        transition: 1.5s; /* Плавный переход */
      }
      .bw:hover {
        -webkit-filter: none;
        filter: none; /* Убираем фильтр */
      }
    </style>
  </head>
  <body>
    <img src="image/aquaria2.jpg" alt="" class="bw" />
    <img src="image/aquaria3.jpg" alt="" class="bw" />
  </body>
</html>

Комментарии