Как наложить полупрозрачный цвет на backgound-image?

Question

[froggush]

Есть background-image в header, на него нужно наложить полупрозрачный цвет. Как это сделать? В интернете много ответов, но все старые и\или дико костыльные. Есть ли способ сделать это красиво?

Answer 1

[Андрей Федоров]

Не совсем понятен термин "красиво".
https://codepen.io/aliencash/pen/vYOXvXR

Comments

[froggush]

Предложенный вами вариант вполне подпадает под это определение :) Спасибо.

Скажите, а обязательно перечислять и linear-gradient и отдельно rgba? Это обязательно или "на всякий пожарный"?

[froggush]

И можно ли это написать через background? Не разделяя на image, position, repeat?

[Андрей Федоров]

jean_gaben, перечислять обязательно, иначе в свойстве background-image залить цветом часть блока не выйдет. Хотя возможно чего-то не знаю.

Можно использовать сокращенную запись, тогда у вас должно быть в свойстве background две сокращенные записи через запятую.

[froggush]

Андрей Федоров, обязательно ли свойство display: flex? Убрал, вроде ничего не изменилось. Зачем оно там?

[froggush]

Андрей Федоров, скажите, пожалуйста, а как наложить на одну картинку другую, полупрозрачную, картинку?

[Андрей Федоров]

jean_gaben, flex не нужен, из шаблона перекочевал. Картинку можно вставить если заменить linear-gradient(), на url().

Answer 2

[Triplicate]

Смотри, такое обычно проделывается благодаря псевдоэлементам before и after. Почитать о них - где угодно в гугле

А полупрозрачный цвет ты можешь задать благодаря rgba(), он принимает в себя rgb - цвет, а 4 параметром - прозрачность. От 0 до 1.
К примеру

.font{
color: rgba(1,1,1,0.5) /* сделает цвет черным и его прозрачность 0.5*/
}

Пример на CodePen: https://codepen.io/Triplicate/pen/YzXGMvj