СSS Свойство filter
Пример
Измените все изображения на черно-белые (100% серый):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Редактор кода »
Определение и использование
Свойство filter определяет визуальные эффекты (например, размытие и насыщенность) для элемента (часто <img>).
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да Прочитайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.WebkitFilter="grayscale(100%)" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit- указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| filter | 53.0 18.0 -webkit- |
13.0 | 35.0 | 9.1 6.0 -webkit- |
40.0 15.0 -webkit- |
Примечание: Более старые версии Internet Explorer (4.0-8.0) поддерживали нестандартное свойство "filter", которое было объявлено устаревшим. Это было главным образом использовано для opacity, когда нужна поддержка IE8 и ниже.
CSS Синтаксис
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 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% сделает изображение полностью сепия. Примечание: Отрицательные значения не допускаются. |
Воспроизвести » |
| url() | Функция url() принимает расположение xml-файла, который задает фильтр SVG, и может включать привязку к определенному элементу фильтра. Пример: filter: url(svg-url#element-id) |
|
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial | |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Примеры
Пример размытия
Применить эффект размытия к изображению:
img {
-webkit-filter: blur(5px); /* Safari */
filter: blur(5px);
}
Редактор кода »
Пример размытия 2
Применение размытого фонового изображения:
img.background {
-webkit-filter: blur(35px); /* Safari */
filter: blur(35px);
}
Редактор кода »
Пример яркости
Отрегулируйте яркость изображения:
img {
-webkit-filter: brightness(200%); /* Safari */
filter: brightness(200%);
}
Редактор кода »
Пример контраста
Отрегулируйте контрастность изображения:
img {
-webkit-filter: contrast(200%); /* Safari */
filter: contrast(200%);
}
Редактор кода »
Пример падения тени
Применение эффекта тени к изображению:
img {
-webkit-filter: drop-shadow(8px 8px 10px gray); /* Safari */
filter: drop-shadow(8px 8px 10px
gray);
}
Редактор кода »
Пример оттенков серого
Преобразование изображения в оттенки серого:
img {
-webkit-filter: grayscale(50%); /* Safari */
filter: grayscale(50%);
}
Редактор кода »
Пример поворота оттенка
Применение поворота оттенка на изображении:
img {
-webkit-filter: hue-rotate(90deg); /* Safari */
filter: hue-rotate(90deg);
}
Редактор кода »
Пример инвертировать
Инвертировать образцы в изображении:
img {
-webkit-filter: invert(100%); /* Safari */
filter: invert(100%);
}
Редактор кода »
Пример непрозрачности
Установите уровень непрозрачности для изображения:
img {
-webkit-filter: opacity(30%); /* Safari */
filter: opacity(30%);
}
Редактор кода »
Пример насыщения
Насыщение изображения:
img {
-webkit-filter: saturate(800%); /* Safari */
filter: saturate(800%);
}
Редактор кода »
Пример сепии
Преобразование изображения в сепию:
img {
-webkit-filter: sepia(100%); /* Safari */
filter: sepia(100%);
}
Редактор кода »
Использование нескольких фильтров
Чтобы использовать несколько фильтров, разделите каждый фильтр пробелом. Обратите внимание, что порядок важен (т.е. использование оттенков grayscale() после того, как sepia() приведет к полностью серому изображению):
img {
-webkit-filter: contrast(200%) brightness(150%); /* Safari */
filter: contrast(200%) brightness(150%);
}
Редактор кода »
Все фильтры
Демонстрация всех функций фильтра:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
Редактор кода »
Связанные страницы
CSS Учебник: CSS Изображения
HTML DOM Справочник: Свойство filter
