Свойство 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='https://mfs.gki-webik.ru/s?path=/images/regular/lion5.jpeg' id='img-test' alt=''/>
</body>
</html>Читайте также
Свойство font-weight
Устанавливает насыщенность шрифта.
Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов....
Стиль поля формы с атрибутом readonly
Применяется к полям формы, у которых задан атрибут readonly. Такое поле не может быть модифицировано, при этом оно получает фокус, а данные в таком по...
Стиль включенных элементов интерфейса
Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находя...
Свойство border-radius
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Можно использовать от1 до 4 знач...