Как изменить цвет PNG изображения с помощью CSS
Самый легкий способ для изменения цвета PNG изображения — это использование свойства filter.
Свойство filter применяет визуальные эффекты к элементу (изображению).
Оно имеет следующие значения:
С помощью этих значений мы можем изменить цвет изображения.
Фильтры являются новыми для браузеров и поддерживаются только очень современными браузерами. Можно использовать фильтры вместе с -Webkit-filter для Safari, Google Chrome и Opera.
Давайте попробуем пошагово изменить цвет изображения:
1. Создайте HTML.
- Скопируйте и вставьте ссылку изображения в основную часть (body section). Здесь мы создаем две изображения с классами «image1» и «image2».
2. Добавьте CSS.
Теперь добавляем стили к классам «Image1» и «Image2».
- Задайте ширину этих изображений с помощью свойства width.
- Добавьте свойство filter , чтобы изменить цвет изображения.
- Используйте значение «invert», которое инвертирует первое изображение. Здесь устанавливаем 100% для полного инвертирования изображения.
- Используйте значение «sepia» (100%), которое превращает второе изображение полностью в сепию.
Посмотрим, каким получился результат:
Пример
Рассмотрим другой пример, где использованы восемь значений свойства filter:
Как через css поменять цвет png изображения?
Смотря что именно должно получиться. Вы бы скриншоты приложили. Например, если совсем примитивно надо, то просто полупрозрачный png и менять фон дива под ним.
UPD
Исходя из скриншота:
Сделайте png, только инвертированными. Фон иконки совпадает с фоном сайта, а контур изображения прозрачный. И меняйте цвет фона дива, в котором находится иконка.
Как изменить цвет картинки в html
Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function.
Example 1: This example use grayscale filter to change the colored image into grayscale image.
Output:
Original Image:
After applying filter:
Example 2: This example use many filter to the image.
Output:
8 CSS фильтров для изображений
Изображения на сайте — мощный инструмент создания атмосферы и привлечения пользователей, поэтому их так много в вебе.
У дизайнеров есть множество продвинутых инструментов для работы с изображениями: различные фильтры, маски и прочие эффекты. Но часто разработчику приходится обходиться без всего этого богатства. Например, этого требуют соображения производительности. Если у вас есть черно-белая картинка, которая при наведении курсора должна становиться цветной, неразумно использовать два разных файла.
К счастью, CSS предоставляет нам широкие возможности для манипуляций с изображениями. Многие графические эффекты можно реализовать в коде — например, фильтры, о которых мы сейчас и поговорим.
Для создания фильтров предназначено CSS-свойство filter , которое может работать с несколькими функциями фильтрации. Каждая из этих функций создает собственный эффект. Допустимо использовать сразу несколько фильтров на одном изображении, при этом конечный результат будет зависеть от их последовательности.
grayscale(% | число)
Один из самых популярных фильтров, который помогает создать черно-белую фотографию из цветной.
Функция grayscale принимает процентное значение «серости», где 0% означает, что картинка не будет изменена, а 100% соответствует полностью черно-белому изображению. Можно вместо процентов использовать доли единицы ( 0 = 0% , 0.5 = 50% , 1 = 100% ).
В этом примере первое фото — совсем без фильтра. К второму применено свойство filter: grayscale(0.5) , и оно на 50% черно-белое. Третье полностью черно-белое из-за свойства filter: grayscale(100%) .
sepia(% | число)
Еще один популярный фильтр — сепия. Он похож на grayscale, только раскрашивает картинку не в серых, а в красно-коричневых тонах. Это дает очень приятный эффект «состаривания».
Синтаксис и принцип работы функции sepia() точно такой же, как у grayscale() .
Пример демонстрирует, как работает этот фильтр. Первое изображение — оригинал без фильтров, второе имеет свойство filter: sepia(0.5) , а третье — filter: sepia(100%) .
blur(px)
Эффект «заблюривания» делает изображение размытым. Для этого используется алгоритм размытия по Гауссу. Может использоваться для «цензурирования» или для маловажного фонового изображения с целью отвлечения внимания.
Функция blur() в CSS принимает всего один аргумент — количество пикселей. Чем оно больше, тем сильнее размытие. Значение по умолчанию равно 0 (полное отсутствие размытия).
Первое изображение в примере как всегда без фильтра, второе имеет небольшое размытие ( 2px ), а последнее размыто очень сильно ( 10px ), так что картинку почти невозможно различить.
brightness (% | число)
Фильтр brightness() позволяет управлять уровнем яркости изображения.
Его синтаксис нам уже знаком — это процентное значение или десятичная дробь. Изначально каждое изображение имеет 100%-ную яркость. Ее можно как уменьшать (до 0%), так и увеличивать.
У второй картинки в примере яркость снижена ( filter: brightness(0.5) ), а у третьей — увеличена до 150% . Чем меньше значение, тем темнее изображение, и наоборот.
contrast(% | число)
Фильтр contrast() , как следует из названия, управляет уровнем контрастности.
Его синтаксис и принцип работы точно такой же, как у функции brightness() .
В примере контраст второй картинки снижен до 50% , а третьей — увеличен до 200% .
saturate(% | число)
Насыщенность изображения — это степень интенсивности цветов, составляющих его. Чем больше значение насыщенности, тем «красочнее» картинка.
Управлять насыщенностью в CSS можно с помощью функции saturate() , синтаксис которой аналогичен brightness() и contrast() .
Вторая картинка в примере кажется тусклой по сравнению с оригиналом ( filter: saturate(0.2) ), а третья — более красочной ( 200% насыщенности).
hue-rotate(deg)
Параметр hue rotate соответствует величине угла на цветовом круге. Он выражается в градусах или радианах и принимает значения от 0deg до 360deg . Вы также можете указать меньшее (отрицательное) или большее значение, но оно в любом случае будет приведено к диапазону 0-360 (в градусах).
Каждый цвет на картинке соответствует определенному углу на цветовом круге. Например, красный — это 0 (или 360) градусов, желтый — 120 градусов, а зеленый — 180.
При использовании фильтра hue-rotate , каждый из исходных цветов будет сдвинут на указанный угол. То есть при hue-rotate(90deg) , красный станет оранжевым, желтый — синезеленым, а зеленый — синим (значения примерные).
Исходное изображение представлено в близких друг к другу желто-зеленых тонах, поэтому смещение оттенка равномерное по всей картинке. Поворот на 90deg в первом изображении смещает общий тон в зеленую часть спектра, на 180deg — в синюю, а на 270deg (-90deg — это то же самое, что 270) — в красную.
invert(% | число)
Еще один фильтр для работы с изображениями из CSS — инвертирование цветов (создание негатива).
Функция invert() принимает процентное значение от 0% до 100% (или от 0 до 1). 0% — исходное изображение, 100% — полный негатив.
Второе изображение в примере инвертировано на 75%, а третье является полным негативом.
Заключение
CSS-фильтры позволяют создавать чудесные визуальные эффекты с изображениями, не вредя при этом производительности сайта.
В статье было рассмотрено 8 функций фильтрации, но на самом деле их чуть больше. Еще есть opacity() , управляющая прозрачностью, и drop-shadow() , создающая тень. Они не разобраны детально, так как не взаимодействуют непосредственно с цветами изображения.