Как наложить цвет на картинку 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 , таким образом фоновый цвет смешивается с фоновым изображением, чтобы отразить яркость или темноту фона.

Наложение полупрозрачного цвета на background-image

Как на картинку наложить цвет с прозрачностью в 0.3 (например, красный) на background-image: url(); ?

Отслеживать
16.6k 8 8 золотых знаков 26 26 серебряных знаков 56 56 бронзовых знаков
задан 6 ноя 2014 в 13:25
176 2 2 золотых знака 5 5 серебряных знаков 19 19 бронзовых знаков

3 ответа 3

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

Ответ от @ДмитрийВасильевич был верный, но нужно поменять местами градиент и фоновое изображение:

background-image: linear-gradient(to top, rgba(255,0,0,0.3), rgba(255,0,0,0.3)), url(http://vmeste.eu/fun/1142791216.jpg); 

Изображение идущее в коде выше перекрывает изображение идущее ниже.

Также можно по отдельности для градиента и изображения задать прочие фоновые свойства:

background-repeat: no-repeat, no-repeat; background-size: cover, contain; 

Наложить цвет на картинку как правильнее всего?

В гугле ответы есть, но большинство из них старые и возможно сейчас не совсем актуальны.

Задача такая, наложить полу прозрачные бекграунд по верх картинки и при наведении менять цвет этого бекграунда.

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

Комментировать

Решения вопроса 3

Ivan Stroykin @StivinKing

Наложение фона на картинку с помощью CSS

Как наложить фон на картинку с помощью CSS? Часто на главной странице сайта или ленинг-пейдж размещают картинку на всю ширину и высоту экрана, а сверху добавляют затемняющий фон, поверх которого в дальнейшем располагается заголовок. Давайте добавим не обычный заголовок, а поздравление с наступающим Новым 2019 годом! ��

Далее в примере я использую картинки с сайта http://lorempixel.com/, чтобы вы могли посмотреть результат в песочнице. Картинки генерируются автоматически, поэтому при каждом изменении кода, будет показываться новая картинка.

Добавим в html-файл следующий код:

 
 
 
С наступающим 
Новым 2019 годом!
 
 

Самое важное, что нужно здесь понимать — позиционирование элементов относительно друг друга.

Пишем в css-файле следующий код:

@import url(‘https://fonts.googleapis.com/css?family=Lobster|Open+Sans&subset=cyrillic’); .wrapper < position: relative; // относительное позиционирование width: 100%; height: 100%; >.wrapper__image < background: url('http://lorempixel.com/400/200/nature/') top center no-repeat; // укажите url к своей картинке background-size: cover; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 0; >.wrapper:after < content: ''; background: rgba(0,0,0,0.7); // фон с прозрачностью 70% display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; >.wrapper__title

Вы можете внести изменения и посмотреть на результат в песочнице:

Другой вариант наложения фона в виде снега:

Голосов: 2 , Средняя оценка: 5