пример
Изменение цвета изображения в черно-белых (100% grayscale) в (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Попробуй сам " Определение и использование
Свойство Фильтр добавляет визуальные эффекты (like blur and saturation) , (like blur and saturation) к изображениям.
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следует Webkit указать первую версию, которая работала с префиксом.
| Имущество | |||||
|---|---|---|---|---|---|
| filter | 18,0 Webkit | 13,0 | 35,0 | 6,0 Webkit | 15,0 Webkit |
Примечание: Chrome, Safari и Opera поддерживают альтернативу, свойство WebkitFilter.
Синтаксис
Возвращает свойство фильтра:
object .style.filterУстановите свойство фильтра:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
Функции фильтрации
Примечание: Фильтры , которые используют процентные значения (ie 75%) , а также принимает значение в виде десятичной (ie 0.75) .
| Фильтр | Описание |
|---|---|
| никто | Указывает, никаких эффектов |
| 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) . Совет: Этот фильтр похож на бокс-теневой собственность. |
| grayscale( % ) | Преобразование изображения в оттенках серого. 0% (0) по умолчанию и представляет собой оригинальное изображение. 100% сделает изображение полностью серый (used for black and white images) . Примечание: Отрицательные значения не допускаются. |
| Хюэ rotate( deg ) | Применяется поворот цветового тона на изображении. Значение определяет количество градусов вокруг цветового круга будет регулировать образцы изображения. 0deg по умолчанию, и представляет собой оригинальное изображение. Примечание: Максимальное значение 360deg. |
| invert( % ) | Инвертирует образцы в изображении. 0% (0) по умолчанию и представляет собой оригинальное изображение. 100% сделает изображение полностью инвертируется. Примечание: Отрицательные значения не допускаются. |
| opacity( % ) | Устанавливает уровень непрозрачности для изображения. Непрозрачность уровень описывает прозрачность уровня, где: 0% является полностью прозрачным. 100% (1) по умолчанию и представляет собой исходное изображение (no transparency) . Примечание: Отрицательные значения не допускаются. Совет: Этот фильтр похож на непрозрачность свойство. |
| saturate( % ) | Насыщает изображение. 0% (0) сделает изображение полностью не-насыщенными. 100% по умолчанию и представляет собой оригинальное изображение. Значения более 100% обеспечивает супер-насыщенные результаты. Примечание: Отрицательные значения не допускаются. |
| sepia( % ) | Преобразование изображения в сепии. 0% (0) по умолчанию и представляет собой оригинальное изображение. 100% сделает изображение полностью сепия. Примечание: Отрицательные значения не допускаются. |
Технические подробности
| CSS версия | CSS3 |
|---|
Похожие страницы
Ссылка CSS: filter property
<Style Object