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

Как изменить цвет 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>

Как наложить цвет на картинку 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?
Спасибо!

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

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

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

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

цвет svg через fill

svg:hover

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

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

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

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

Как изменить цвет кнопки?

Для изменения цвета фона и текста кнопки используем, соответственно, свойства background и color, добавляя их к селектору button , как показано в примере 1.

Пример 1. Цветные кнопки

Основные параметры кнопки применяем к селектору button , а дополнительно вводим разные классы, чтобы легко менять цвет кнопок. На рис. 1 продемонстрирован результат данного примера, в котором создаются плоские одноцветные кнопки.

Рис. 1. Цветные кнопки

См. также

• background
• color
• currentColor
• text-fill-color
• Атрибут link
• Атрибуты
• Единицы цвета в CSS
• Кнопки
• Кнопки
• Кнопки в Bootstrap 4
• Линейный градиент
• Наследование в CSS
• Несколько фоновых картинок
• Работа с типографикой
• Создание кнопок
• Спрайты
• Установка фона и градиента
• Фоновая картинка