Как изменить цвет png в css

Как наложить цвет на картинку css

Чтобы наложить цвет на картинку с помощью CSS, вы можете использовать свойство background-color для элемента, содержащего изображение. Это свойство устанавливает цвет фона элемента и может быть применено к любому элементу, в том числе к элементу, содержащему изображение.

Например, если у вас есть элемент с классом image-container , содержащий изображение, и вы хотите сделать полупрозрачный зеленый фон, вы можете использовать следующий CSS-код:

.image-container  background-color: rgba(0, 255, 0, 0.5); > 

Здесь мы устанавливаем цвет фона элемента с помощью свойства background-color . Функция rgba используется для установки цвета в формате «красный, зеленый, синий, прозрачность», где значения красного, зеленого и синего цветов находятся в диапазоне от 0 до 255, а прозрачность — от 0 до 1. Значение прозрачности 0.5 устанавливает полупрозрачный цвет.

Если вы хотите, чтобы цвет находился над изображением, а не под ним, вы можете использовать свойство background-blend-mode , которое определяет как фоновое изображение элемента будет смешиваться с его фоновым цветом:

.image-container  background-color: rgba(0, 255, 0, 0.5); background-blend-mode: overlay; > 

Здесь мы используем свойство background-blend-mode с значением overlay , таким образом фоновый цвет смешивается с фоновым изображением, чтобы отразить яркость или темноту фона.

Как через css изменить цвет png изображения?

Есть png-иконки, например, из вк, синего цвета. Как с помощью css изменить его на белый?

P.S: нагуглил про filter: hue-rotate() , но с белым цветом это походу не вариант.

Отслеживать
задан 4 фев 2017 в 13:01
279 1 1 золотой знак 3 3 серебряных знака 11 11 бронзовых знаков
посмотрите здесь fontello.com
4 фев 2017 в 14:22

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Вы можете использовать css-фильтры:

• grayscale конвертирует цвета в ч/б
• sepia создает эффект сепии
• saturate задает насыщенность
• hue-rotate меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg)
• invert инвертирует цвета
• opacity задает прозрачность элемента
• brightness изменяет яркость изображения
• contrast изменяет контрастность изображения
• blur создает эффект размытости
• drop-shadow создает тень

Примечание: фильтры можно комбинировать между собой

.bg < background-color: #8fbd35; padding: 20px; >.fl

Материал для прочтения: habrahabr

Демо: демо

Как через css поменять цвет png изображения?

Доброе утро!
Есть желтое png изображение, хочется, чтобы при наведении становилось черным.
Как можно сделать через css?
Спасибо!

• Вопрос задан более трёх лет назад
• 34617 просмотров

3 комментария

Оценить 3 комментария

Только заменой самого изображения, т.к. цветом можно управлять только svg.
Кристина @KrisIris Автор вопроса
Спасибо!
А svg как поменять? Через hover и background или fill?

цвет svg через fill

svg:hover

Решения вопроса 0
Ответы на вопрос 5

Разработчик
CSS Filters только так, если через CSS.
Ответ написан более трёх лет назад
Комментировать
Нравится 6 Комментировать

Смотря что именно должно получиться. Вы бы скриншоты приложили. Например, если совсем примитивно надо, то просто полупрозрачный png и менять фон дива под ним.

UPD
Исходя из скриншота:
Сделайте png, только инвертированными. Фон иконки совпадает с фоном сайта, а контур изображения прозрачный. И меняйте цвет фона дива, в котором находится иконка.

Как изменить цвет PNG изображения с помощью CSS

Самый легкий способ для изменения цвета PNG изображения — это использование свойства filter.

Свойство filter применяет визуальные эффекты к элементу (изображению).

Оно имеет следующие значения:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

С помощью этих значений мы можем изменить цвет изображения.

Фильтры являются новыми для браузеров и поддерживаются только очень современными браузерами. Можно использовать фильтры вместе с -Webkit-filter для Safari, Google Chrome и Opera.

Давайте попробуем пошагово изменить цвет изображения:

1. Создайте HTML.

• Скопируйте и вставьте ссылку изображения в основную часть (body section). Здесь мы создаем две изображения с классами «image1» и «image2».

body> img src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> " src="https://ru.w3docs.com/snippets/css/%3C/span%3Ehttps://www.sccpre.cat/mypng/detail/%3Cspan%20%3E122%3C/span%3E-%3Cspan%20%3E1229311%3C/span%3E_bird-feathers-flying-macaw-wings-birds-with-white.png%3Cspan%20%3E" width="500px" height="250px" alt="filter applied" /> 

2. Добавьте CSS.

Теперь добавляем стили к классам «Image1» и «Image2».

• Задайте ширину этих изображений с помощью свойства width.
• Добавьте свойство filter , чтобы изменить цвет изображения.
• Используйте значение «invert», которое инвертирует первое изображение. Здесь устанавливаем 100% для полного инвертирования изображения.
• Используйте значение «sepia» (100%), которое превращает второе изображение полностью в сепию.

Посмотрим, каким получился результат:

Пример

html> html> head> title>Измените цвет изображения title> style> img < width:40%; float:left; > .image1 < filter: invert(100%); -webkit-filter: invert(100%); > .image2 < filter: sepia(100%); -webkit-filter: sepia(100%); > style> head> body> h2>Измените цвет PNG изображения h2> img class="image1" src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> img class="image2" src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> body> html>

Рассмотрим другой пример, где использованы восемь значений свойства filter:

Пример

html> html> head> title>Заголовок документа title> style> body < background-color:#03030a; min-width: 800px; min-height: 400px > img < width:20%; float:left; margin:0; > /*Filter styles*/ .saturate < filter: saturate(3); -webkit-filter: saturate(3); > .grayscale < filter: grayscale(100%); -webkit-filter: grayscale(100%); > .contrast < filter: contrast(160%); -webkit-filter: contrast(160%); > .brightness < filter: brightness(0.25); -webkit-filter:brightness(0.25); > .blur < filter: blur(3px); -webkit-filter: blur(3px); > .invert < filter: invert(100%); -webkit-filter: invert(100%); > .sepia < filter: sepia(100%); -webkit-filter: sepia(100%); > .huerotate < filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); > .opacity < filter: opacity(50%); -webkit-filter: opacity(50%); > style> head> body> h2>Измените цвет PNG изображения h2> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity"> body> html>

Можете также применить следующую технику:

• Укажите элементы в основной части. Установите IDs для вашего div элемента. Здесь имеем ID «original» и «changed».

body> div >div> div >div> body> Начните применить стили для IDs. Установите filter: hue-rotate; к ID "changed

• Начните применить стили для IDs. Установите filter: hue-rotate; к ID «changed».

#changed < -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); >

Результат будет выглядеть следующим образом:

Пример

html> html> head> title>Измените цвет изображения title> style> #original, #changed < background: url('https://image.freepik.com/free-photo/orange-red-siamese-fighting-fish-betta-splendens-isolated-white-background_51519-539.jpg'); background-size: cover; width: 30%; margin: 0 10% 0 10%; padding-bottom: 28%; float: left; > #changed < -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); > style> head> body> h2>Измените цвет PNG изображения h2> div id="original"> div> div id="changed"> div> body> html>