Как наложить цвет на картинку css — Q&A Хекслет
2026-02-26 17:05 Diff
https://ru.hexlet.io/qna/css/questions/kak-nalozhit-tsvet-na-kartinku-css

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

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

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

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

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