filter¶
Свойство filter
предназначено для применения художественных эффектов к элементам.
Обычно используется для изображений, чтобы размыть их, увеличить контрастность, преобразовать в чёрно-белую картинку и др.
Синтаксис¶
/* URL to SVG filter */
filter: url('filters.svg#filter-id');
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;
Значения¶
<фильтр>
- фильтр.
none
- Отменяет действие наложенных фильтров.
Фильтр — это функция, которая позволяет изменять вид изображения, применяя к нему разные эффекты, вроде контрастности, яркости, преобразования в чёрно-белую картинку и др.
blur()¶
Функция blur()
задаёт размытие по Гауссу изображений, фоновых картинок или текста. К элементу <body>
напрямую применить размытие нельзя, только к его потомкам.
Синтаксис
filter: blur(<размер>);
Значения
В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS (к примеру: 5px
). Чем больше значение, тем сильнее будет размыто изображение.
Отрицательное значение не допускается. Пустое значение воспринимается как 0px
.
Спецификация
brightness()¶
Функция brightness()
понижает или повышает яркость изображений или фоновых картинок.
Синтаксис
filter: brightness(<значение>);
Значения
Значение 100%
или 1
оставляет изображение исходным. Любые значения меньше 100%
(или меньше 1
) понижают яркость изображения. Таким образом, 0
даёт полностью чёрную картинку. Значения больше 100%
(или больше 1
) повышают яркость изображения.
Отрицательное значение не допускается. Пустое значение воспринимается как 1
.
Спецификация
contrast()¶
Функция contrast()
понижает или повышает контрастность изображений или фоновых картинок.
Синтаксис
filter: contrast(<значение>);
Значения
Значение 100%
или 1
оставляет изображение исходным. Любые значения меньше 100%
(или меньше 1
) понижают контрастность изображения. При этом 0
даёт однотонную серую картинку. Значения больше 100%
(или больше 1
) повышают контрастность изображения.
Отрицательное значение не допускается. Пустое значение воспринимается как 1
.
Спецификация
drop-shadow()¶
Функция drop-shadow()
добавляет тень к изображениям. В отличие от свойства box-shadow
во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.
Синтаксис
filter: drop-shadow(<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>);
Значения
<сдвиг по x>
- Смещение тени по горизонтали относительно картинки. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
<сдвиг по y>
- Смещение тени по вертикали относительно картинки. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
<размытие>
- Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным
0
, тень при этом будет чёткой, а не размытой. <цвет>
- Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная. Необязательный параметр.
При пустом значении все параметры воспринимается как 0
. Цвет тени по умолчанию такой же, как значение свойства color
.
Спецификация
grayscale()¶
Функция grayscale()
превращает изображение в чёрно-белое.
Синтаксис
filter: grayscale(<значение>);
Значения
Значение 100%
или 1
превращает изображение в чёрно-белое. Значение 0
оставляет изображение исходно цветным. Значения меньше 100%
(или меньше 1
) линейно меняют цветность картинки.
Отрицательное значение не допускается. Пустое значение воспринимается как 0
.
Спецификация
Примечания¶
- Internet Explorer c версии 4 по 10 поддерживает другое нестандартное свойство
filter
с тем же именем, но другим синтаксисом. - Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство
-webkit-filter
.
Значение по-умолчанию:
filter: none;
Применяется к: Ко всем элементам
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>filter</title>
<style>
.bw {
-webkit-filter: grayscale(100%);
filter: grayscale(
100%
); /* Чёрно-белое изображение */
transition: 1.5s; /* Плавный переход */
}
.bw:hover {
-webkit-filter: none;
filter: none; /* Убираем фильтр */
}
</style>
</head>
<body>
<img src="image/aquaria2.jpg" alt="" class="bw" />
<img src="image/aquaria3.jpg" alt="" class="bw" />
</body>
</html>