пример
Изменение цвета всех изображений в черно-белый (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Подсказка: Больше "Try it Yourself" примеры ниже.
Определение и использование
Свойство фильтра определяет визуальные эффекты (like blur and saturation) , (often <img>) (like blur and saturation) к элементу (often <img>) .
| Значение по умолчанию: | никто |
|---|---|
| Наследование: | no |
| Animatable: | yes. Read about animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.WebkitFilter="grayscale(100%)" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа с последующим -webkit- указать первую версию, которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| filter | 18,0 -webkit- | 13,0 | 35,0 | 9.1 6.0 -webkit- | 15,0 -webkit- |
Примечание: Старые версии Internet Explorer (4.0 to 8.0) поддерживает нестандартную "filter" свойство , которое является устаревшим. Это было в основном используется для непрозрачности при необходимости поддержку от IE8 и вниз.
CSS Синтаксис
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();Совет: Чтобы использовать несколько фильтров, каждый фильтр разделения с пробелом (See "More Examples" below) .
Функции фильтрации
Примечание: Фильтры , которые используют процентные значения (ie 75%) , а также принимает значение в виде десятичной (ie 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 ) | Применяется эффект тени к изображению. Возможные значения: ч-тень - Обязательно. Задает значение пикселя для горизонтальной тени. Отрицательные значения поместить тень слева от изображения. v-тень - Обязательно. Задает значение пикселя для вертикальной тени. Отрицательные значения поместите тень над изображением. размытие - необязательно. Это третье значение, и должно быть в пикселях. Добавляет эффект размытия тени. Большее значение будет создавать больше размытие (тень становится больше и светлее). Отрицательные значения не допускаются. Если не указано значение, используется 0 (край теневой является резкое). спрэд - Необязательно. Это четвертое значение, и должно быть в пикселях. Положительные значения заставит тень расширяться и расти больше, а отрицательные значения приведет тень сокращаться. Если не указано, то будет 0 (the shadow will be the same size as the element) , (the shadow will be the same size as the element) . Примечание: Chrome, Safari и Opera, и , возможно , другие браузеры, не поддерживают эту 4 - ю длину; он не будет оказывать при добавлении. цвет - необязательно. Добавляет цвет тени. Если не указано, цвет зависит от браузера (often black) . Пример создания красного тень, которая 8px большой как по горизонтали, так и по вертикали, с эффект размывания 10 пикселей: Фильтр: капля-тень (8px 8px 10px красный); Подсказка: Этот фильтр аналогичен коробчатого теневой собственности. | Сыграй " |
| grayscale( % ) | Преобразование изображения в оттенках серого. 0% (0) по умолчанию , и представляет собой исходное изображение. 100% сделает изображение полностью серый (used for black and white images) . Примечание: Отрицательные значения не допускаются. | Сыграй " |
| hue-rotate( deg ) | Применяется поворот цветового тона на изображении. Значение определяет количество градусов вокруг цветового круга будет скорректирован образцы изображения. 0deg по умолчанию, и представляет собой оригинальное изображение. Примечание: Максимальное значение 360deg. | Сыграй " |
| invert( % ) | Инвертирует образцы в изображении. 0% (0) по умолчанию , и представляет собой исходное изображение. 100% сделает изображение полностью перевернутой. Примечание: Отрицательные значения не допускаются. | Сыграй " |
| opacity( % ) | Устанавливает уровень непрозрачности для изображения. Непрозрачность уровня описывает прозрачность уровня, где: 0% является полностью прозрачным. 100% (1) является по умолчанию и представляет собой исходное изображение (no transparency) . Примечание: Отрицательные значения не допускаются. Подсказка: Этот фильтр похож на непрозрачности собственности. | Сыграй " |
| saturate( % ) | Насыщает изображение. 0% (0) сделает изображение полностью не-насыщенными. 100% по умолчанию и представляет собой исходное изображение. Значения более 100% обеспечивает супер-насыщенные результаты. Примечание: Отрицательные значения не допускаются. | Сыграй " |
| sepia( % ) | Преобразует изображение в сепии. 0% (0) по умолчанию , и представляет собой исходное изображение. 100% сделает изображение полностью сепия. Примечание: Отрицательные значения не допускаются. | Сыграй " |
| url() | url() функция принимает местоположение файла XML , который определяет SVG фильтр, и может включать в себя якорь для конкретного элемента фильтра. Пример: Фильтр: url(svg-url#element-id) | |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
Размытие Пример
Применить эффект размытия к изображению:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
Яркость Пример
Отрегулируйте яркость изображения:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
Контраст Пример
Отрегулируйте контрастность изображения:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Drop Shadow Пример
Применить эффект тени к изображению:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
Оттенки серого Пример
Преобразование изображения в оттенках серого:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
Вращение тона Пример
Применить поворот цветового тона на изображении:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
Инверсия Пример
Обратить образцы в изображении:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
Непрозрачность Пример
Установите уровень непрозрачности для изображения:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
Насыщение Пример
Пропитайте изображение:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
Sepia Пример
Преобразовать изображение в сепии:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
Комбинирование Фильтры / несколько фильтров
Чтобы использовать несколько фильтров, каждый фильтр отделить пробелом.
Примечание: заказ важен (ie using grayscale() с sepia() (ie using grayscale() после того, как sepia() приведет к совершенно серое изображение).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
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);
} Попробуй сам " Похожие страницы
HTML DOM ссылка: filter property