Свойство backdrop-filter

Описание

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

Синтаксис

backdrop-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: 350px; } 
#test{ 
width: 350px; 
height: 350px; 
position: absolute; 
z-index: 2; 
-webkit-backdrop-filter: hue-rotate(190deg); 
backdrop-filter: hue-rotate(190deg); 
}
</style> 
<div id='test'></div> 
<img src='/files/images/regular/lion5.jpeg' class='anim22' id='img-test' alt=''>
</body>
</html>

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

Свойство grid-auto-columns

Определяет размер любых автоматически созданных треков. Неявные треки создаются при явном позицио...

Свойство margin-left

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

Свойство border-color

Позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

Стиль последнего элемента определённого типа

Псевдокласс :last-of-type задаёт стиль последнего элемента определённого типа в группе братских э...

Свойство border-top

Позволяет одновременно установить толщину, стиль и цвет верхней границы элемента.<br>Значен...