CSS свойство filter

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

none
blur
brightness
contrast
drop-shadow
grayscale
hue-rotate
invert
opacity
saturate
sepia
url

Значения

Значение по умолчанию	none
Применяется	К элементам, у которых значение display установлено как table-cell.
Наследуется	Нет
Анимируемое	Да
Версия	CSS3
DOM синтаксис	object.style.WebkitFilter = "hue-rotate(360deg)";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
      filter: blur(3px);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства filter</h2>
    <p>Для этого изображения установлен фильтр "blur(3px)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

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

Пример, где попробуем осветлить изображение:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      -webkit-filter: brightness(120%);/* Safari 6.0 - 9.0 */
      filter: brightness(150%);
      }
    </style>
  </head>
  <body>
    <h2>Заголовок документа</h2>
    <p>Для этого изображения установлен фильтр "brightness(150%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image"> 
    </p>
  </body>
</html>

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

В следующем примере изображение становится серым при помощи значения "greyscale":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      -webkit-filter: grayscale(80%);/* Safari 6.0 - 9.0 */
      filter: grayscale(80%);
      }
    </style>
  </head>
  <body>
    <h2>Пример фильтра</h2>
    <p>Для этого изображения установлен фильтр "grayscale(80%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

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

Пример с применением фильтра "saturate", где заданное значение равно 300%:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      -webkit-filter: saturate(300%);/* Safari 6.0 - 9.0 */
      filter: saturate(300%);
      }
    </style>
  </head>
  <body>
    <h2>Заголовок документа</h2>
    <p>Для этого изображения установлен фильтр "saturate(300%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

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

Значения

Значение	Описание
none	Указывает на отсутствие эффекта. Значение по умолчанию.
blur	Применяет размытие к изображению. Устанавливается в пикселах. Чем больше значение, тем больше будет размытие. Если значение не указано, то используется значение 0.
brightness	Изменяет яркость изображения. Если значение равно 0, изображение будет черным. 100% - значение по умолчанию, которое показывает оригинальное изображение. Значения больше 100% увеличивают яркость изображения.
contrast	Регулирует контрастность изображения. Если значение равно 0, изображение будет черным. 100% - значение по умолчанию, которое показывает оригинальное изображение. Значения больше 100% увеличивают контрастность изображения.
drop-shadow	Добавляет эффект тени к изображению.
grayscale	Изменяет цвета изображения в градации серого. 0% - значение оригинального изображения. 100% делает изображение серым. Отрицательные значения недопустимы.
hue-rotate	Применяет к изображению цветовой сдвиг. Задается в градусах. Максимальным значением является 360 градусов.
invert	Инвертирует цвета в изображении. 0% - значение по умолчанию. 100% полностью преобразует цвета.
opacity	Определяет степень прозрачности изображения. Если изображение имеет значение 0%, оно будет полностью прозрачным. 100% представляет исходное изображение.
saturate	Изменяет насыщенность цветов в изображении. 0% полностью убирает насыщенность цветов в изображении, 100% - значение по умолчанию изображения. Значения больше 100% делают цвета в изображении более насыщенными.
sepia	Преобразует изображение в сепию. 0% - значение по умолчанию. 100% полностью превращает изображение в сепию.
url	Функция url() принимает в качестве параметра ссылку на XML файл, определяющий SVG фильтр, и может включать якорь, указывающий какой-либо фильтр элемента.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.