Свойства Стиль фильтр

примеров

Изменение цвета изображения в черно-белый (100% серым цветом):

// Chrome, Safari и Opera браузеры
document.getElementById ( "myImg") .style.WebkitFilter = "серой шкалы (100%)";

// Стандартный синтаксис (другие основные браузеры не поддерживают)
document.getElementById ( "myImg") .style.filter = "серой шкалы (100%)";

Попробуйте »

Определение и использование

запланировано на фильтрующих элементов (как правило, <IMG>) визуальные эффекты.

Примечание: Если элемент не гибкие элементы, flexGrow свойство не работает.

Поддержка браузеров

Цифры в таблице представляют собой первый браузер, поддерживающий номер версии метода.

свойство
фильтр	18,0 Webkit	Не поддерживает	Не поддерживает	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()"

функция фильтрации

Примечание: Фильтры обычно используют процент (например , 75%), конечно, также могут быть использованы для представления десятичных чисел (например: 0,75).

фильтр	описание
никто	Значение по умолчанию, никакого эффекта.
размытие (ПВ)	Гауссово размывание с настройками изображения. "Радиус", чтобы установить значение стандартной функции Гаусса плохое, или количество пикселей на экране, чтобы расплавить вместе, поэтому чем больше значение тем более расплывчатым; Если значение не задано, по умолчанию равно 0, то этот параметр можно установить значение длины CSS, но не принимает процентных значений.
Яркость (%)	Применение линейного умножения на изображение, чтобы сделать его светлее или темнее. Если значение равно 0%, то изображение все черное. Значение 100%, никаких изменений в изображении. Другие значения соответствуют линейному мультипликативный эффект. Стоимость более чем на 100% возможно, изображение будет ярче, чем оригинал. Если значение не задано, по умолчанию 1.
Контраст (%)	Отрегулируйте контрастность изображения. Значение равно 0%, то изображение все черное. Значение 100%, то изображение без изменений. Значения могут превышать 100%, что означает, будет использовать более низкую контрастность. Если значение не задано, по умолчанию 1.
дроп-тень (ч-тень v -Shadow размытие спрэд цвет)	Настройка теневой эффект к изображению. Тени синтезируются в изображении ниже, может быть двусмысленности, определенный цвет может построить диаграмму маску смещения версии. Функция принимает <теневую> значение (определенное в фоновом режиме CSS3) типа, в дополнение к "врезке" ключевое слово не допускается. Функция с существующим коробчатого теневой бокс-теневой собственности очень похоже, за исключением того, что через фильтр, некоторые браузеры для более высокой производительности обеспечивает аппаратное ускорение. `<shadow>参数如下：` образом `<shadow>参数如下：` <Смещение-х> <offset- у> ( должны) Он устанавливается два смещения тени <длина> значение. На левом элементе появляется <Offset-х> Preferences горизонтальное расстояние отбрасываемой тени. <Offset-й> , чтобы установить расстояние по вертикали капли тень появляется над элементом. См <длина> возможные единицы. Если оба значения равны 0, то тень появляется за положительных элементов (если он установлен `<blur-radius> and/or <spread-radius>，会有模糊效果 ).` <Смазанности радиус> (необязательно) Это третий код> <длина> значение. Чем выше значение, тем более размытым тень станет больше и больше света. Если не разрешено устанавливать отрицательное значение по умолчанию равно 0 (теневые границы диез). < С расширенным радиусом> (необязательно) Это четвертая <длина> значение значение будет тень расширение и больше, отрицательная тень будет уменьшена. Если он не установлен, то по умолчанию 0 (тени и элементы одинакового размера). Примечание: Webkit, а также некоторые другие браузеры не поддерживают четвертую длину, если увеличение не будет оказано. <Цвет> (необязательно) См <цвет> значение возможных ключевых слов и тегов. Если он не установлен, цветовые значения на основе браузера. Gecko (Firefox), Presto (Opera ) и Trident (Internet Explorer) в, будет применять цветовые атрибуты значения цвета. Кроме того, если значение цвета опущено, WebKit дымчатый.
оттенки серого (%)	Преобразование изображения в оттенках серого. Он определяет значение коэффициента преобразования. Значение 100% полностью преобразуется в черно-белое изображение, значение 0% изображения без изменений. Значения от 0% до 100%, эффект мультипликатора является линейным. Если он не установлен, то значение по умолчанию равно 0;
Оттенок поворота (град)	Применение к вращению изображения цветового тона. "Угол" угол цвет кольцо изображение является скорректированное значение установленное значение. Значение 0deg, изменение изображения. Если значение не задано, по умолчанию используется значение 0deg. Хотя не существует максимальное значение, которое превышает значение эквивалента другого периметра 360deg.
инвертировать (%)	Инверсия входного изображения. Он определяет значение коэффициента преобразования. 100% от стоимости полностью восстанавливается. Значение 0%, то изображение без изменений. Значение в диапазоне от 0% до 100%, эффект мультипликатора является линейным. Если значение не задано, то значение по умолчанию равно 0.
Непрозрачность (%)	Степень преобразования прозрачности изображения. Он определяет значение коэффициента преобразования. 0% является полностью прозрачным, а значение 100%, изображение без изменений. Значение в диапазоне от 0% до 100%, эффект линейный множитель, умножается на число выборок также эквивалентно изображению. Если значение не задано, то значение по умолчанию равно 1. Эта функция очень похожа на существующей непрозрачности собственности, за исключением того, что через фильтр, для того, чтобы улучшить производительность некоторых браузеров обеспечит аппаратное ускорение.
насытить (%)	Преобразует насыщенность изображения. Он определяет значение коэффициента преобразования. 0% полностью ненасыщенным, никаких изменений в изображении не составляет 100%. Другое значение, эффект мультипликатора является линейным. Более 100% от стоимости допускается, существует более высокая насыщенность. Если значение не задано, то значение по умолчанию равно 1.
сепия (%)	Преобразовать изображение в сепии. Он определяет значение коэффициента преобразования. Значение 100% полностью темно-коричневого цвета, составляет 0% от изображения без изменений. Значения от 0% до 100%, эффект мультипликатора является линейным. Если он не установлен, то значение по умолчанию равно 0;
URL ()	URL функция принимает файл XML, который устанавливает SVG фильтр, и может включать в себя якорь, чтобы указать конкретный элемент фильтра. Например: filter: url(svg-url#element-id)
начальная	Свойство устанавливается по умолчанию значения, см: в CSS исходное ключевое слово
унаследовать	Это свойство наследуется от родительского элемента, вы можете увидеть: CSS - код Наследовать ключевое слово