Пример
Измените все изображения на черно-белые (100% серые):
img {
filter: grayscale(100%);
}
Попробуйте сами »
Определение filter
CSS свойство filter определяет визуальные эффекты (такие как размытие и насыщенность) для элемента (часто <img>).
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.filter="grayscale(100%)" Попробуй |
Поддержка filter
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit - указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| filter | 53.0 18.0-webkit- |
13.0 | 35.0 | 9.1 6.0-webkit- |
40.0 15.0-webkit- |
Синтаксисfilter
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Совет: Чтобы использовать несколько фильтров, разделите каждый фильтр пробелом (смотрите "Дополнительные примеры" ниже).
Функции фильтра
Примечание: Фильтры, использующие процентные значения (т.е. 75%), также принимают значение в десятичном виде (т.е. 0,75).
| Фильтр | Описание | Демонстрация |
|---|---|---|
| none | Значение по умолчанию. Определяет никаких эффектов | Демо ❯ |
| blur(px) | Применяет эффект размытия к изображению. Большее значение создаст большее размытие. Если значение не указано, используется 0. |
Демо ❯ |
| brightness(%) | Регулирует яркость изображения. 0% сделает изображение полностью черным. Значение 100% (1) по умолчанию соответствует исходному изображению. Значения более 100% обеспечат более яркие результаты. |
Демо ❯ |
| contrast(%) | Регулирует контрастность изображения. 0% сделает изображение полностью черным. Значение 100% (1) по умолчанию соответствует исходному изображению. Значения, превышающие 100%, обеспечат большую контрастность результатов. |
Демо ❯ |
| drop-shadow(h-shadow v-shadow размытый цвет) | Применяет к изображению эффект отбрасывания тени. Возможные значения: h-shadow - Требуется. Определяет значение пикселя для горизонтальной тени. Отрицательные значения помещают тень слева от изображения. v-shadow - Обязательна. Определяет значение пикселя для вертикальной тени. Отрицательные значения помещают тень над изображением. blur - Необязательный. Это третье значение, и оно должно быть в пикселях. Добавляет эффект размытия тени. Большее значение создаст большее размытие (тень станет больше и светлее). Отрицательные значения недопустимы. Если значение не указано, используется 0 (край тени резкий). spread - Необязательный. Это четвертое значение, и оно должно быть в пикселях. Положительные значения заставят тень расширяться и становиться больше, а отрицательные значения заставят тень сжиматься. Если не указано, то это будет 0 (тень будет того же размера, что и элемент). Примечание: Chrome, Safari и Opera, и, возможно, другие браузеры, не поддерживают эту 4-ю длину; при добавлении она не будет отображаться. color - Необязательный. Добавляет цвет к тени. Если не указано, цвет зависит от браузера (часто черный). Пример создания красной тени размером 8 пикселей как по горизонтали, так и по вертикали, с эффектом размытия 10 пикселей: filter: drop-shadow(8px 8px 10px red); Совет: Этот фильтр аналогичен свойству box-shadow. |
Демо ❯ |
| grayscale(%) | Преобразует изображение в оттенки серого. 0% (0) используется по умолчанию и представляет исходное изображение. 100% сделает изображение полностью серым (используется для черно-белых изображений). Примечание: Отрицательные значения не допускаются. |
Демо ❯ |
| hue-rotate(deg) | Применяет поворот оттенка к изображению. Значение определяет количество градусов вокруг цветового круга, на которое будут скорректированы образцы изображения. Значение по умолчанию равно 0 градусам и представляет исходное изображение. Примечание: Максимальное значение составляет 360 град. |
Демо ❯ |
| invert(%) | Инвертирует образцы на изображении. 0% (0) используется по умолчанию и представляет исходное изображение. 100% сделает изображение полностью инвертированным. Примечание: Отрицательные значения не допускаются. |
Демо ❯ |
| opacity(%) | Устанавливается уровень непрозрачности изображения. Уровень непрозрачности описывает уровень прозрачности, где: 0% полностью прозрачно. 100% (1) используется по умолчанию и представляет исходное изображение (без прозрачности). Примечание: Отрицательные значения недопустимы. Ответ: Этот фильтр аналогичен свойству . |
Демо ❯ |
| saturate(%) | Насыщает изображение. 0% (0) сделает изображение полностью ненасыщенным. Значение по умолчанию 100% соответствует исходному изображению. Значения более 100% обеспечивают результаты перенасыщения. Примечание: Отрицательные значения не допускаются. |
Демо ❯ |
| sepia(%) | Преобразует изображение в сепию. 0% (0) используется по умолчанию и представляет исходное изображение. 100% сделает изображение полностью сепиевым. Примечание: Отрицательные значения недопустимы. |
Демо ❯ |
| url() | Функция url() определяет местоположение XML-файла, который определяет SVG-фильтр, и может включать привязку к определенному элементу фильтра. Пример: \: filter: url(svg-url#element-id) |
|
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры фильтра
Пример blur 2
Примените размытое фоновое изображение:
img.background {
filter: blur(35px);
}
Попробуйте сами »
Пример brightness
Отрегулируйте яркость изображения:
img {
filter: brightness(200%);
}
Попробуйте сами »
Пример contrast
Отрегулируйте контрастность изображения:
img {
filter: contrast(200%);
}
Попробуйте сами »
Пример drop-shadow
Примените эффект отбрасывания тени к изображению:
img {
filter: drop-shadow(8px 8px 10px
gray);
}
Попробуйте сами »
Пример grayscale
Преобразуйте изображение в оттенки серого:
img {
filter: grayscale(50%);
}
Попробуйте сами »
Пример hue-rotate
Примените поворот оттенка к изображению:
img {
filter: hue-rotate(90deg);
}
Попробуйте сами »
Пример opacity
Установить уровень непрозрачности изображения:
img {
filter: opacity(30%);
}
Попробуйте сами »
Использование нескольких фильтров
Чтобы использовать несколько фильтров, разделяйте каждый фильтр пробелом. Обратите внимание, что порядок важен (т.е. использование функции grayscale() после sepia() приведет к получению полностью серого изображения):
img {
filter: contrast(200%) brightness(150%);
}
Попробуйте сами »
Все фильтры
Демонстрация всех функций фильтра:
.blur {
filter: blur(4px);
}
.brightness {
filter: brightness(0.30);
}
.contrast {
filter: contrast(180%);
}
.grayscale {
filter: grayscale(100%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(7);
}
.sepia {
filter: sepia(100%);
}
.shadow {
filter: drop-shadow(8px 8px 10px green);
}
Попробуйте сами »
Страницы по теме filter
CSS Учебник: CSS Изображения
HTML DOM справочник: filter свойство