CSS filter Свойство
Пример
Измените все изображения на Черное и белое (100% серого):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Совет: Подробнее примеры ниже.
Определение и использование
Свойство filter определяет визуальные эффекты (например, размытие и насыщенность) для элемента (часто <img>).
| Значение по умолчанию: | none |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | 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", которое устарело. В основном это было использовано для не прозрачности при необходимости поддержки от IE8 и Down.
Синтаксис CSS
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Совет: Чтобы использовать несколько фильтров, разделите каждый фильтр на пробел (см. ниже "Дополнительные примеры").
Filter Functions
Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).
| Filter | Описание | |
|---|---|---|
| none | Значение по умолчанию. Указывает отсутствие эффектов | |
| blur(px) | Применение эффекта размытия к изображению. Большее значение создаст больше размытия. Если значение не указано, используется 0. |
|
| brightness(%) | Регулировка яркости изображения. 0% сделает изображение полностью черным. 100% (1) по умолчанию и представляет исходное изображение. Значения более 100% обеспечат более яркие результаты. |
|
| contrast(%) | Регулировка контрастности изображения. 0% сделает изображение полностью черным. 100% (1) по умолчанию и представляет исходное изображение. Значения более 100% обеспечат результаты с меньшим контрастом. |
|
| drop-shadow(h-shadow v-shadow blur spread color) | Применяет эффект тени к изображению. Возможные значения: h-тень -требуется. Задает значение пикселя для горизонтальной тени. Отрицательные значения поместите тень слева от изображения. v-тень -требуется. Задает значение пиксела для вертикальной тени. Отрицательные значения поместите тень над изображением. размыт ие — необязательно. Это третье значение и должно быть в пикселях. Добавляет эффект размытия в тень. Большее значение создаст больше размытия (тень становится больше и светлее). Отрицательные значения не допускаются. Если значение не указано, используется 0 (кромка тени резко). спред -опционально. Это четвертое значение и должно быть в пикселях. Положительные значения приводят к тому, что тень расширяется и увеличивается, а отрицательные значения приводят к уменьшению размера тени. Если значение не указано, оно будет равно 0 (тень будет иметь тот же размер, что и элемент). Примечание: Chrome, Safari и Opera, и, возможно, другие браузеры, не поддерживают эту 4-ю длину; Он не будет отображаться при добавлении. Цвет — необязательный. Добавляет цвет к тени. Если не указано, цвет зависит от браузера (часто черного). Пример создания Красной тени, 8px большой как по горизонтали, так и по вертикали, с эффектом размытия 10px: фильтр: Drop-Тень (8px 8px 10px красный); Совет: Этот фильтр подобен свойству box-shadow. |
|
| grayscale(%) | Преобразует изображение в оттенки серого. 0% (0) по умолчанию и представляет исходное изображение. 100% сделает изображение полностью серым (используется для черно-белых изображений). Примечание: Отрицательные значения не допускаются. |
|
| hue-rotate(deg) | Применение поворота оттенка на изображении. Значение определяет количество градусов вокруг цветового круга, в котором будут корректироваться образцы изображений. 0дег по умолчанию и представляет исходное изображение. Примечание: Максимальное значение — 360дег. |
|
| invert(%) | Инвертирование образцов в изображении. 0% (0) по умолчанию и представляет исходное изображение. 100% сделает изображение полностью инвертированным. Примечание: Отрицательные значения не допускаются. |
|
| opacity(%) | Задает уровень непрозрачности для изображения. Уровень прозрачности описывает уровень прозрачности, где: 0% является полностью прозрачным. 100% (1) по умолчанию и представляет исходное изображение (без прозрачности). Примечание: Отрицательные значения не допускаются. Совет: Этот фильтр подобен свойству Opacity. |
|
| saturate(%) | Насыщение изображения. 0% (0) сделает изображение полностью un-насыщенным. 100% по умолчанию и представляет исходное изображение. Значения более 100% обеспечивают супер-насыщенные результаты. Примечание: Отрицательные значения не допускаются. |
|
| sepia(%) | Преобразует изображение в сепия. 0% (0) по умолчанию и представляет исходное изображение. 100% сделает изображение полностью сепия. Примечание: Отрицательные значения не допускаются. |
|
| url() | Функция URL () принимает расположение XML-файла, указывающего фильтр SVG, и может включать привязку к определенному элементу фильтра. Примере: фильтр: 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%);
}
Использование нескольких фильтров
Чтобы использовать несколько фильтров, разделите каждый фильтр на пробел. Обратите внимание, что порядок важен (например, использование оттенков серого () после сепия () приведет к полностью серое изображение):
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 Свойство