Лучшее руководство по CSS3 фильтр (фильтр) свойства в 2024 году. В этом руководстве вы можете изучить Определения и использование,Поддержка браузеров,CSS Синтаксис,функция фильтрации,Другие примеры,Статьи по Теме,
CSS3 фильтр (фильтр) свойства
примеров
Измените все цвета в черно-белых снимков (100% серым цветом):
-webkit-фильтр: черно - белый (100% ); / * Chrome, Safari, Opera * /
Фильтр: черно - белый (100%);
}
Попробуйте »
Определения и использование
Атрибут фильтра определяет элементы (обычно <IMG>) визуальные эффекты (например: Fuzzy и насыщенность).
| По умолчанию: | никто |
|---|---|
| Наследование: | нет |
| Поддержка анимации: | Да. Подробности можно найти в CSS анимации |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.WebkitFilter = "оттенки серого (100%)" , чтобы попытаться >> |
Поддержка браузеров
Цифры в таблице представляют собой первый браузер, поддерживающий номер версии метода.
Сразу после номера для префикса указанного браузера -webkit-.
| свойство | |||||
|---|---|---|---|---|---|
| фильтр | 18,0 -webkit- | Не поддерживает | 35,0 | 6.0 -webkit- | 15,0 -webkit- |
Примечание: Старые Internet Explorer браузер (4.0 до 8.0) для поддержки нестандартных "фильтр" помещение было брошено. IE8 и более ранние браузеры часто используют непрозрачности свойство.
CSS Синтаксис
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Совет: Используйте пробел для разделения нескольких фильтров.
функция фильтрации
Примечание: Фильтры обычно используют процент (например , 75%), конечно, также могут быть использованы для представления десятичных чисел (например: 0,75).
| фильтр | описание |
|---|---|
| никто | Значение по умолчанию, никакого эффекта. |
| размытие (ПВ) | Гауссово размывание с настройками изображения. "Радиус", чтобы установить значение стандартной функции Гаусса плохое, или количество пикселей на экране, чтобы расплавить вместе, поэтому чем больше значение тем более расплывчатым; Если значение не задано, по умолчанию равно 0, то этот параметр можно установить значение длины CSS, но не принимает процентных значений. |
| Яркость (%) | Применение линейного умножения на изображение, чтобы сделать его светлее или темнее. Если значение равно 0%, то изображение все черное. Значение 100%, никаких изменений в изображении. Другие значения соответствуют линейному мультипликативный эффект. Стоимость более чем на 100% возможно, изображение будет ярче, чем оригинал. Если значение не задано, по умолчанию 1. |
| Контраст (%) | Отрегулируйте контрастность изображения. Значение равно 0%, то изображение все черное. Значение 100%, то изображение без изменений. Значения могут превышать 100%, что означает, будет использовать более низкую контрастность. Если значение не задано, по умолчанию 1. |
| дроп-тень (ч-тень v -Shadow размытие спрэд цвет) | Настройка теневой эффект к изображению. Тени синтезируются в изображении ниже, может быть двусмысленности, определенный цвет может построить диаграмму маску смещения версии. Функция принимает <теневую> значение (определенное в фоновом режиме CSS3) типа, в дополнение к "врезке" ключевое слово не допускается. Функция с существующим коробчатого теневой бокс-теневой собственности очень похоже, за исключением того, что через фильтр, некоторые браузеры для более высокой производительности обеспечивает аппаратное ускорение.
|
| оттенки серого (%) | Преобразование изображения в оттенках серого. Он определяет значение коэффициента преобразования. Значение 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 - код Наследовать ключевое слово |
Другие примеры
Нечеткие примеры
Фото Гауссово размывание:
-webkit-фильтра: размытие (5px) ; / * Chrome, Safari, Opera * /
Фильтр: размытие (5px);
}
Попробуйте »
Яркость Функция Instance
Сделать снимок более ярким:
-webkit-фильтр: яркость (200% ); / * Chrome, Safari, Opera * /
Фильтр: яркость (200%);
}
Попробуйте »
Контраст Функция Instance
Отрегулируйте контрастность изображения:
-webkit-фильтр: контрастность (200% ); / * Chrome, Safari, Opera * /
Фильтр: контрастность (200%);
}
Попробуйте »
Примеры функций раскрывающихся теневые
Настройка теневой эффект к изображению:
-webkit-фильтр: капля-тень ( 8px 8px 10px красный); / * Chrome, Safari, Opera * /
Фильтр: капля-тень (8px 8px 10px красный);
}
Попробуйте »
Оттенки серого Функция Instance
Преобразование изображения в оттенках серого:
-webkit-фильтр: черно - белый (50% ); / * Chrome, Safari, Opera * /
Фильтр: оттенки серого (50%);
}
Попробуйте »
() примеры функций цветового тона поворота
Приложения вращения цветового тона к изображению:
-webkit-фильтр: Hue-Rotate ( 90deg); / * Chrome, Safari, Opera * /
Фильтр: Hue-Rotate (90deg) ;
}
Попробуйте »
Инверсия Функция Instance
Инверсия входного изображения:
-webkit-фильтр: инвертный (100% ); / * Chrome, Safari, Opera * /
Фильтр: инвертный (100%);
}
Попробуйте »
Непрозрачность Функция Instance
Степень преобразования прозрачности изображения:
-webkit-фильтр: Непрозрачность (30% ); / * Chrome, Safari, Opera * /
Фильтр: Непрозрачность (30%);
}
Попробуйте »
Пропитайте Функция Instance
Преобразование насыщенности изображения:
-webkit-фильтр: насытить (800% ); / * Chrome, Safari, Opera * /
Фильтр: насытить (800%);
}
Попробуйте »
Sepia Функция Instance
Преобразование изображения в сепии:
-webkit-фильтр: сепия (100% ); / * Chrome, Safari, Opera * /
Фильтр: сепия (100%);
}
Попробуйте »
сложная функция
Использование нескольких фильтров, каждый фильтр, разделенных пробелами.
Примечание: Порядок очень важно (например, с использованием шкалы серого () перед использованием сепия () будет производить полное изображение серой шкалы).
-webkit-фильтр: контрастность (200% ) яркости (150%); / * Chrome, Safari, Opera * /
Фильтр: контрастность (200%) яркости (150%);
}
Попробуйте »
Все примеры фильтров
В следующем примере показано, как использовать весь фильтр:
-webkit-фильтра: размытие (4px) ;
Фильтр: размытие (4px);
}
.Brightness {
-webkit-фильтр: яркость (0,30) ;
Фильтр: яркость (0,30);
}
.contrast {
-webkit-фильтр: контрастность (180% );
Фильтр: контрастность (180%);
}
.grayscale {
-webkit-фильтр: черно - белый (100% );
Фильтр: черно - белый (100%);
}
.huerotate {
-webkit-фильтр: цветовой тон поворота ( 180 градусов);
Фильтр: цветовой тон поворота (180 градусов) ;
}
.invert {
-webkit-фильтр: инвертный (100% );
Фильтр: инвертный (100%);
}
.opacity {
-webkit-фильтр: Непрозрачность (50% );
Фильтр: Непрозрачность (50%);
}
.saturate {
-webkit-фильтр: насытить (7) ;
Фильтр: насытить (7);
}
.sepia {
-webkit-фильтр: сепия (100% );
Фильтр: сепия (100%);
}
.shadow {
-webkit-фильтр: капля-тень ( 8px 8px 10px зеленый);
Фильтр: капля-тень (8px 8px 10px зеленый);
}
Попробуйте »
Статьи по Теме
HTML DOM Ссылка: Стиль атрибуты фильтра
