Свойство filter

Описание

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

Синтаксис

filter: none | фильтр;
Значение Описание
none Значение по умолчанию. Указывает отсутствие эффектов
blur(px) Применяет эффект размытия к изображению. Большее значение создаст больше размытия.

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

0% сделает изображение полностью черным.
100% (1) является значением по умолчанию и представляет собой исходное изображение.
Значение над 100% обеспечит более яркие результаты.
contrast(%) Регулирует контрастность изображения.

0% сделает изображение полностью черным.
100% (1) является значением по умолчанию и представляет собой исходное изображение.
Значение над 100% обеспечит результаты с большим контрастом.
drop-shadow(h-shadow v-shadow blur spread color) Применяет эффект тени к изображению.

Возможное значение:
h-shadow - Требуемый. Задает значение пикселя для горизонтальной тени. Отрицательные значения помещают тень слева от изображения.

v-shadow - Требуемый. Задает значение пикселя для вертикальной тени. Отрицательные значения помещают тень над изображением.

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

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

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

Пример создания красной тени, которая является 8px большой как по горизонтали, так и по вертикали, с эффектом размытия 10px:

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

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

0% (0) используется по умолчанию и представляет исходное изображение.
100% сделает изображение полностью серым (используется для черно-белых изображений).

Примечание: Отрицательные значения не допускаются.
hue-rotate(deg) Применяет поворот оттенка к изображению. Значение определяет количество градусов вокруг цветового круга, в котором будут скорректированы образцы изображений. 0deg используется по умолчанию и представляет исходное изображение.

Примечание: Максимальное значение 360deg.
invert(%) Инвертирует образцы в изображении.

0% (0) имеет значение по умолчанию и представляет исходное изображение.
100% сделает изображение полностью перевернутым.

Примечание: Отрицательные значения не допускаются.
opacity(%) Устанавливает уровень непрозрачности для изображения. Уровень непрозрачности описывает уровень прозрачности, где:

0% полностью прозрачный.
100% (1) имеет значение по умолчанию и представляет исходное изображение (без прозрачности).

Примечание: Отрицательные значения не допускаются.
Совет: Этот фильтр похож на свойство opacity.
saturate(%) Насыщает изображение.

0% (0) сделает изображение полностью ненасыщенным.
100% имеет значение по умолчанию и представляет исходное изображение.
Значение более 100% обеспечивает сверхнасыщенные результаты.

Примечание: Отрицательные значения не допускаются.
sepia(%) Преобразует изображение в сепию.

0% (0) имеет значение по умолчанию и представляет исходное изображение.
100% сделает изображение полностью сепия.

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

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#img-test {
width: 250px;
position: absolute;
filter: hue-rotate(200deg);
}
</style>
<img src='/files/images/regular/lion5.jpeg' id='img-test' alt=''/>
</body>
</html>

Читайте также

Свойство order

Определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значен...

Свойство border-bottom-width

Устанавливает толщину границы внизу элемента.

Свойство margin-top

Устанавливает величину отступа от верхней границы текущего элемента до внутренней границы его род...

Свойство box-shadow

Добавляет тень к элементу.<br>Разрешено использовать несколько теней, указывая их через зап...

Стиль непосещенных ссылок

Псевдокласс :link применяется к ссылкам, которые ещё не посещались пользователем, и задаёт для ни...