W3docs
ru
Войти

Свойство CSS filter

The filter CSS property sets filters to the image. Learn about values and see the effects illustrated in the examples.

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

  • none
  • blur
  • brightness
  • contrast
  • drop-shadow
  • grayscale
  • hue-rotate
  • invert
  • opacity
  • saturate
  • sepia
  • url
Initial Valuenone
Applies toAll elements.
InheritedNo.
AnimatableYes.
VersionCSS3
DOM Syntaxobject.style.filter = "hue-rotate(360deg)";

Синтаксис

Синтаксис свойства CSS filter

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

Пример свойства filter:

Пример свойства CSS filter со значением blur

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: blur(3px);
        max-width: 100%;
      }
    </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>
Попробуйте сами »

Результат

CSS filter Property

Пример использования свойства filter для увеличения яркости изображения:

Пример свойства CSS filter со значением brightness

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

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

Пример свойства filter со значением "grayscale":

Пример свойства CSS filter со значением grayscale

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: grayscale(80%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Пример filter</h2>
    <p>Для этого изображения фильтр установлен на "grayscale(80%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Попробуйте сами »

Здесь к изображению применяется фильтр "saturate" со значением 300%.

Пример свойства filter со значением "saturate":

Пример свойства CSS filter со значением saturate

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

Пример свойства filter со значением "sepia":

Пример свойства filter со значением sepia

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: sepia(70%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Пример filter</h2>
    <p>Для этого изображения фильтр установлен на "sepia(70%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Попробуйте сами »

Пример свойства filter со значением "contrast":

Пример свойства CSS filter со значением contrast

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: contrast(40%);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Пример filter</h2>
    <p>Для этого изображения фильтр установлен на "contrast(40%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Попробуйте сами »

Пример свойства filter со значением "opacity":

Пример свойства CSS filter со значением "opacity"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: opacity(0.4);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Пример filter</h2>
    <p>Для этого изображения фильтр установлен на "opacity(0.4)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Попробуйте сами »

Пример свойства filter со значением "invert":

Пример свойства CSS filter со значением "invert"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: invert(0.7);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Пример filter</h2>
    <p>Для этого изображения фильтр установлен на "invert(0.7)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Попробуйте сами »

Пример свойства filter со значением "hue-rotate":

Пример свойства CSS filter со значением "hue-rotate"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        filter: hue-rotate(90deg);
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Пример filter</h2>
    <p>Для этого изображения фильтр установлен на "hue-rotate(90deg)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
    </p>
  </body>
</html>
Попробуйте сами »

Значения

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

Practice

Практика

Какие разные типы эффектов можно получить с помощью свойства CSS filter?