Свойство CSS filter
Свойство filter используется для применения визуальных эффектов к элементу (image). Свойство filter имеет следующие значения:
- none
- blur
- brightness
- contrast
- drop-shadow
- grayscale
- hue-rotate
- invert
- opacity
- saturate
- sepia
- url
| Initial Value | none |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | CSS3 |
| DOM Syntax | object.style.filter = "hue-rotate(360deg)"; |
Синтаксис
Синтаксис свойства CSS filter
css
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;Пример свойства filter:
Пример свойства CSS filter со значением blur
html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Результат
Пример использования свойства filter для увеличения яркости изображения:
Пример свойства CSS filter со значением brightness
html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>В следующих примерах значение "grayscale" делает изображение серым:
Пример свойства filter со значением "grayscale":
Пример свойства CSS filter со значением grayscale
html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Здесь к изображению применяется фильтр "saturate" со значением 300%.
Пример свойства filter со значением "saturate":
Пример свойства CSS filter со значением saturate
html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Пример свойства filter со значением "sepia":
Пример свойства filter со значением sepia
html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Пример свойства filter со значением "contrast":
Пример свойства CSS filter со значением contrast
html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Пример свойства filter со значением "opacity":
Пример свойства CSS filter со значением "opacity"
html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Пример свойства filter со значением "invert":
Пример свойства CSS filter со значением "invert"
html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Пример свойства filter со значением "hue-rotate":
Пример свойства CSS filter со значением "hue-rotate"
html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Значения
| Value | Description | Play 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?