предисловие
смотрелИюльское видео учителя, я видел стиль, который был-webkit-filter, я не знаю, что это такое (я не изучал CSS, хе-хе, поэтому я не знаю, что это такое), поэтому я проверил, и это оказался фильтр. Но когда я использовал его в апплете WeChat, внизу была зеленая волнистая линия, и после тщательной проверки оказалось, что она находится вChrome 18, Safari 6,Opera 15используется в-webkit-filter,а также-moz-filter(для фаерфокса),-ms-filter(адаптировано для IE 8-9) и, если используется в апплете WeChat, используйтеfilterВот и все. После некоторого любопытства я попробовал еще несколько функций.Ниже приведены подробные примечания.
определение
filterАтрибуты определяют элементы (обычно) визуальные эффекты (например, размытие и насыщенность).
Классификация
- none Значение по умолчанию, без эффекта.
- blur() Размытие по Гауссу
- яркость () яркость
- контраст() контраст
- падающая тень () тень
- оттенки серого() оттенки серого
- hue-rotate() Поворот оттенка
- инвертировать () инвертировать цвет
- непрозрачность () прозрачность
- насыщение () насыщенность
- Sepia () Винтажный цвет
- url() Фильтр SVG
- Составная функция Комбинация нескольких фильтров
использовать
Совет: Фильтры обычно используют проценты (например: 75%), конечно, они также могут быть выражены в десятичных дробях (например: 0,75).
blur
Размытие по Гауссу: размытие (радиус), установите размытие по Гауссу для изображения. Значение «радиуса» устанавливает стандартное отклонение функции Гаусса или количество пикселей, смешанных вместе на экране, поэтому, чем больше значение, тем больше размытие; Если заданного значения нет, по умолчанию используется значение 0; этот параметр может задавать значение длины css, но не принимает процентное значение.
filter: blur(18px);
brightness
Яркость: применяет к изображению линейное умножение, чтобы сделать его ярче или темнее. Если значение равно 0%, изображение будет полностью черным. Значение 100% оставляет изображение без изменений. Другие значения соответствуют эффектам линейного множителя. Значения более 100% подходят, и изображение будет ярче, чем раньше. Если значение не задано, значение по умолчанию равно 1.
filter: brightness(70%);
contrast
Контрастность: настройка контрастности изображения. При значении 0% изображение будет полностью черным. Значение 100% оставляет изображение без изменений. Значения могут превышать 100%, что означает, что будет использоваться более низкая контрастность. Если значение не задано, значение по умолчанию равно 1.
filter: contrast(50%);
drop-shadow
Устанавливает эффект тени на изображении. Тени составляются под изображением и могут иметь размытую, смещенную версию маски, которую можно нарисовать определенным цветом. Функции принимают значения типа (определенные в фонах CSS3), за исключением того, что ключевое слово «inset» не разрешено. Эта функция очень похожа на существующее свойство box-shadow box-shadow; разница в том, что некоторые браузеры обеспечивают аппаратное ускорение для повышения производительности с помощью фильтров. Параметры следующие:
(должен) Это два значения, которые устанавливают смещение тени. Устанавливает расстояние по горизонтали. Отрицательные значения заставят тень появиться слева от элемента. Установите расстояние по вертикали. Отрицательные значения заставят тень появиться над элементом. элемент. См. возможные единицы. Если оба значения равны 0, тень появляется прямо за элементом (и/или, если установлено, с эффектом размытия). (необязательный) Это третье значение code>.Чем больше значение, тем более размытой станет тень.Отрицательные значения не допускаются.Если не задано, то по умолчанию 0 (граница тени резкая). (необязательный) Это четвертое значение. Положительное значение заставит тень расширяться и увеличиваться, а отрицательное значение уменьшит тень. Если не задано, по умолчанию используется значение 0 (тень будет такого же размера, как и элемент). Примечание. Webkit и некоторые другие браузеры не поддерживают четвертую длину и не будут отображаться, если они будут добавлены.
(необязательный) См. возможные ключевые слова и теги для этого значения. Если не задано, значение цвета зависит от браузера. В Gecko (Firefox), Presto (Opera) и Trident (Internet Explorer) применяется значение свойства colorcolor. Кроме того, если значение цвета не указано, тень в WebKit будет прозрачной.
filter: drop-shadow(15rpx 15rpx 10rpx #999999);
grayscale
шкала серого (100%) — черно-белая.
Оттенки серого: преобразование изображения в изображение в оттенках серого. Значение определяет масштаб преобразования. Значение 100% полностью преобразует изображение в оттенки серого, а значение 0% не изменит изображение. Значение от 0% до 100% является линейным множителем эффекта. Если не установлено, значение по умолчанию равно 0;
filter: grayscale(60%);
hue-rotate
Hue: приложение к вращению оттенка изображения. «Угол» - это настройка значений настройки изображенияцветное кольцозначение угла. Если значение равно 0 градусов, изображение не меняется. Если значение не установлено, значение по умолчанию равно 0 градусов. Хотя для этого значения не существует максимального значения, значение, превышающее 360 градусов, эквивалентно другому кругу.
filter: hue-rotate(90deg);
invert
Инвертировать: инвертировать входное изображение. Значение определяет масштаб преобразования. 100% значения — это полный разворот. Значение 0% оставляет изображение без изменений. Значение от 0% до 100% является линейным множителем эффекта. Если значение не установлено, значение по умолчанию равно 0.
filter: invert(0.8);
opacity
Прозрачность: степень прозрачности преобразованного изображения. Значение определяет масштаб преобразования. Значение 0% полностью прозрачно, а значение 100% не изменяет изображение. Значение от 0% до 100% представляет собой линейный множитель эффекта, который также эквивалентен умножению количества образцов изображения на число. Если значение не установлено, значение по умолчанию равно 1. Эта функция очень похожа на существующее свойство opacity, разница в том, что через фильтр некоторые браузеры обеспечивают аппаратное ускорение для повышения производительности.
filter: opacity(20%);
saturate
Насыщенность: преобразование насыщенности изображения. Значение определяет масштаб преобразования. Значение 0% означает полное обесцвечивание, а значение 100% означает отсутствие изменений в изображении. Остальные значения являются линейными множителями эффекта. Допускаются значения более 100%, с более высокой насыщенностью. Если значение не установлено, значение по умолчанию равно 1.
filter: saturate(0%);
sepia
Сепия: Винтаж Преобразует изображение в сепию. Значение определяет масштаб преобразования. Значение 100 % соответствует полной сепии, а значение 0 % не влияет на изображение. Значение от 0% до 100% является линейным множителем эффекта. Если не установлено, значение по умолчанию равно 0;
filter: sepia(70%);
url
Создайте новый текстовый файлfilter.txt, содержание следующее
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter-primitives">
<feGaussianBlur stdDeviation="3" />
<feColorMatrix type="hueRotate" values="270"/>
<feColorMatrix type="saturate" values="0.75"/>
<feBlend mode="multiply"/>
</filter>
</defs>
</svg>
Измените суффикс файла на.svg
ссылка на этот файл svg в коде
<!--filter:url('svg的路径#element-id')-->
style="filter:url('../../images/filters.svg#filter-primitives')"
Составная функция
В составных функциях несколько фильтров разделяются пробелами. Примечание. Порядок очень важен (например, использование оттенков серого(), за которым следует сепия(), создаст полное изображение в градациях серого).
filter: saturate(0%) drop-shadow(15rpx 15rpx 10rpx #999999);