Лучшее руководство по CSS3 фильтр (фильтр) свойства в 2024 году. В этом руководстве вы можете изучить Определения и использование,Поддержка браузеров,CSS Синтаксис,функция фильтрации,Другие примеры,Статьи по Теме,
Измените все цвета в черно-белых снимков (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 и более ранние браузеры часто используют непрозрачности свойство.
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 - код Наследовать ключевое слово |
Фото Гауссово размывание:
Сделать снимок более ярким:
Отрегулируйте контрастность изображения:
Настройка теневой эффект к изображению:
Преобразование изображения в оттенках серого:
Приложения вращения цветового тона к изображению:
Инверсия входного изображения:
Степень преобразования прозрачности изображения:
Преобразование насыщенности изображения:
Преобразование изображения в сепии:
Использование нескольких фильтров, каждый фильтр, разделенных пробелами.
Примечание: Порядок очень важно (например, с использованием шкалы серого () перед использованием сепия () будет производить полное изображение серой шкалы).
В следующем примере показано, как использовать весь фильтр:
HTML DOM Ссылка: Стиль атрибуты фильтра