Как правильно использовать прозрачность(opacity в background-image)?

Question

[Владимир Суворов]

Столкнулся с такой проблемой есть 2 изображения которые подгружаются через (background-image ( для масштабирования и центрирования) на этом изображении есть еще текст но проблема в том что если использовать просто opacity то все наследуют прозрачность, если же использовать background-color:rgba(36, 54, 60, 0.5); то не работает, так как background-image перекрывает новый слой как я понял (ибо при обновлении страницы мелькает сначала цвет, а после ложится фото).
Вот краткий код который я сделал.
https://jsfiddle.net/my_kachanov/8w96239o/1/

Answer 1

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

Допускается множественный background-image, а для того, чтобы использовать цвет в нем можно применить linear-gradient:

background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('http://www.rofl.com.ua/images/2008/cutest_animal_babies_17.jpg');

Answer 2

[Сергей Горячев]

https://jsfiddle.net/webirus/e1mtr4sq/1/
Еще как вариант, через псевдоэлементы)

Answer 3

[Алексей Скляров]

Еще как вариант: создаете блок с картинкой, на него вешаете блок с прозрачным bg и текстом, например:

<div class="bg-image">
 <div class="bg-color">Текст</div>
</div>

.bg-image {background: url(LINK);}
.bg-color {background:rgba(0,0,0,0);}
.bg-image:hover .bg-color {background: rgba(0,0,0,.95);}