предисловие
«Когда дело доходит до обработки изображений, мы часто думаем об инструментах обработки изображений, таких как PhotoShop. Как разработчикам интерфейса, нам часто приходится иметь дело со специальными эффектами, такими как отображение значков разными цветами в зависимости от разных состояний. время, разберитесь с контрастом и тенью изображения».
Как вы думаете, они обрабатываются программным обеспечением PS? Нет-нет, это чисто написано на css, это потрясающе.
Мощный CSS:фильтр
CSS-фильтры (фильтры) предназначены для графических эффектов, таких как размытие, повышение резкости или обесцвечивание элементов. Фильтры часто используются для настройки рендеринга изображений, фона и границ.MDN
Стандарт CSS содержит некоторые функции с предопределенными эффектами.
filter: none
| blur()
| brightness()
| contrast()
| drop-shadow()
| grayscale()
| hue-rotate()
| invert()
| opacity()
| saturate()
| sepia()
| url();
<!--html-->
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原图">
filter: none
Нет эффекта, фильтр по умолчанию - нет
filter:blur() Размытие по Гауссу
Придайте изображению эффект размытия по Гауссу, чем больше значение длины, тем более размытым будет изображение.
давай попробуем
img {
filter:blur(2px);;
}
яркость (%) линейное умножение
Может сделать изображение ярче или темнее
img {
filter:brightness(70%);
}
контраст(%) контраст
Отрегулируйте контрастность изображения.
img {
filter:contrast(50%);
}
drop-shadow(h-shadow v-shadow blur spread color)
Устанавливает эффект тени на изображении. Тени составляются под изображением и могут иметь размытую, смещенную версию маски, которую можно нарисовать определенным цветом. Функции принимают значения типа (определенные в фонах CSS3), за исключением того, что ключевое слово «inset» не разрешено. Эта функция аналогична существующему свойству box-shadow box-shadow; разница в том, что некоторые браузеры обеспечивают аппаратное ускорение для повышения производительности с помощью фильтров.
Используя эту схему, мы фактически меняем цвет некоторых значков, например, черные значки на синие значки.
CSS технология присвоения произвольного цвета для мелких иконок формата PNG
img {
filter: drop-shadow(705px 0 0 #ccc);
}
Здесь мы проецируем изображение на серую область одинакового размера.
hue-rotate(deg) Поворот оттенка
img {
filter:hue-rotate(70deg);
}
Смотри, моя младшая сестра стала аватаркой!
инвертировать (%) инвертировать
Функция этой функции заключается в инвертировании входного изображения, что-то вроде эффекта экспонирования.
img {
filter:invert(100%)
}
оттенки серого (%) преобразует изображение в оттенки серого
Этот эффект может состарить картину и создать ощущение превратностей времени. Этот эффект обязательно понравится любителям античного стиля.
img {
filter:grayscale(80%);
}
В дополнение к старинному стилю есть еще одно использование, которое иногда должно сделать всю станцию серой, например, в День памяти жертв Холокоста.
можно установить так
*{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
сепия (%) преобразовать изображение в сепию
Вот теплый тон для моей младшей сестры.
img {
filter:sepia(50%)
}
Вы заметили, что я не написал здесь метод url()?
Правильно, потому что я хочу поставить это последним, filter:url() — это лучший способ для фильтров CSS изменять изображения. CSS:filter может импортировать фильтр svg как собственный фильтр.
Идеальное решение для изменения цвета! фильтр: URL();
Почему filter:url() является идеальным решением для обесцвечивания изображения, позвольте мне не торопиться.
Давайте сначала популяризируем принцип работы PS. Все мы знаем, что веб-страница имеет три основных цвета: R (красный), G (зеленый), B (синий), Общий RGBA также включает значение непрозрачности, а значение непрозрачности рассчитывается на основе на альфа-канале. Другими словами, каждый пиксель веб-страницы, которую мы видим, состоит из четырех каналов красного, синего и зеленого плюс альфа-канал. Каждый канал называется цветовой пластиной. 8-битная пластина в PS означает восемь из 2. Мощность 256, что означает, что диапазон значений каждого канала составляет (0-255)SVG Research Road (11) - filter:feColorMatrix
Если мы можем изменить значение каждого канала, можем ли мы получить любой желаемый цвет идеально? В принципе, мы можем использовать фильтр svg, такой как ps, чтобы получить любое изображение, которое мы хотим, а не только обесцвечивание. Мы можем даже создать изображение из воздуха.
svg feColorMatrix Дафа хорош
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="change">
<feColorMatrix type="matrix" values="
0 0 0 0 0.55
0 0 0 0 0.23
0 0 0 0 0
0 0 0 0 1" />
</filter>
</defs>
</svg>
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">
img {
filter:url(#change);
}
С помощью одного канала мы можем превратить изображение в один цвет.
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="change">
<feColorMatrix values="3 -1 -1 0 0
-1 3 -1 0 0
-1 -1 3 0 0
0 0 0 1 0" />
</filter>
</defs>
</svg>
Через двойной канал мы можем получить очень классные эффекты PS.
Конечно, здесь, просто в качестве примера, настроив значения в матрице, мы можем настроить значение каждого пикселя для отображения в соответствии с определенными нами правилами.
Подробнее о методе расчета матрицы feColorMatrix поговорим здесь.
Среди них Рин Ги
n Bin a(alpha) — это значение rgba каждого пикселя в исходном изображении.
В результате матричного расчета полученное значение Rout Gout Bout Aout является окончательным отображаемым значением rgba.
Преобразование изображения в монохромное. Возьмем для примера коричневый цвет rgba(140,59,0,1).
По приведенной выше формуле можно упростить некоторые расчеты, в этой же строке задается значение только одного канала, а остальные каналы равны 0.
Получить матрицу не сложно.
0 0 0 0 目标值R
0 0 0 0 目标值G
0 0 0 0 目标值B
0 0 0 0 1
По правилам надо только рассчитать,255/канал, соответствующий цвету, который вы хотите отобразить = целевое значение
Коричневый rgba, который нам нужен (140,59,0,1), преобразуется в swatch rgba как 140 59 0 255.
целевое значение может быть рассчитано
0 0 0 0 0.55
0 0 0 0 0.23
0 0 0 0 0
0 0 0 0 1
Многоканальные настройки для крутых эффектов
Так же, как крутая картинка, сформированная двойным каналом, которую мы видели ранее.
Хотим сегодня увеличить насыщенность картинки, как это сделать? Прежде всего, конечно, задумайтесь о причине насыщения, то есть чем краснее красный, чем синее синий, чем зеленее зеленый.Отталкиваясь от этой причины, наша матрица может быть записана в следующем виде, и мы можем видите что в матрице появляются 3 и -.1.Это должно быть очень скучно.Откуда это взялось?Принцип скорпиона на самом деле очень прост для понимания.Допустим что RGB определенного пикселя (200/ 255), (100/255), (50/255) соответственно. Он должен быть немного тускло-оранжевым. После преобразования матрицы R становится 200/255x3-100/255-50/255= 1,76, G становится 200/255x( -1)+100/255*3-50/255=0,2, B становится 200x(-1)+100x(-1)+50x3=-0,59, поэтому после преобразования RGB получается: 200x1,76, 100x0,2 , 50х-0,5.SVG Research Road (11) - filter:feColorMatrix
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="change">
<feColorMatrix values="3 -1 -1 0 0
-1 3 -1 0 0
-1 -1 3 0 0
0 0 0 1 0" />
</filter>
</defs>
</svg>
Другие варианты
В дополнение к svg-фильтру feColorMatrix существует множество способов определения фильтров, и их также можно применять к изображениям. Из-за ограничений по объему здесь это не приводится.
Суммировать
- CSS3 предоставляет атрибут фильтра, который позволяет добиться более крутых спецэффектов с помощью интерфейсной технологии.
- В зависимости от фильтра svg мы можем добиться сложных эффектов фильтра.
Уведомление
- css: фильтр - это не то же самое, что фильтр на т.е.
- css:filter имеет разную совместимость в разных браузерах, при его использовании нужно обращать внимание на совместимость с браузером
использованная литература
- SVG Research Road (11) - filter:feColorMatrix
- css:filter MDN
- Color Filters Can Turn Your Gray Skies Blue
- CSS технология присвоения произвольного цвета для мелких иконок формата PNG
напиши в конце
На этот раз я поместил исходный код на codePen.код спрей.IO/Южное озеро боится других/…добро пожаловать на просмотр
В статье неизбежно будут упущения, надеюсь все смогут исправить критику
Собственный публичный аккаунт Amway в WeChat:Руководство по внешнему интерфейсу