Прозрачный фон позади гибкого элемента ⇐ CSS

[Anonymous]

У меня есть следующий код:

Код: Выделить всё

Document

body {
padding: 0;
margin: 0;
grid-template-areas: usrdscr;
}

main .usrcontainer {
grid-area: usrdscr;
display: flex;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
background-color: rgba(6, 6, 92, 0.335);
width: 100%;
}

main .usrcontainer .imgbkg {
background-color: transparent;
align-self: center;
}

main .usrcontainer .imgbkg img {
max-height: 105px;
justify-content: right;
}

main .usrcontainer p {
color: black;
align-content: center;
padding-left: 20px;
min-height: 130px;
}

main .usrcontainer .usrdscr {
width: 90%;
}

main .usrcontainer .price {
font-size: xx-large;
max-width: 120px;
text-align: left;
padding-right: 40px;
}

main .usrcontainer .pricenote {
text-align: left;
align-content: end;
padding-bottom: 10px;
}

main .usrcontainer .stars {
justify-self: center;
align-self: start;
padding: 30px;
}







[img]https://source.unsplash.com/random/105x105[/img]
Name, [b]Job[/b] 
[img]https://source.unsplash.com/random/15x15[/img]
                alt="Map pin"> 5Km

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus vero ex debitis eligendi sed
non maxime vitae molestias aperiam quos.

[img]https://source.unsplash.com/random/200x15[/img]
R$200,00 / hora
Lorem, ipsum dolor.

Я пытаюсь сделать так, чтобы первое изображение (которое находится внутри div «imgbkg») не имело за собой фонового цвета. Теперь первое изображение использует тот же цвет фона, что и div «usrcontainer». Я попытался установить «цвет фона: прозрачный», как показано, но это не сработало. Я попытался выполнить поиск и обнаружил, что использование «flex: 1» может помочь, но все равно. Помогите пожалуйста с ним????

Подробнее здесь: https://stackoverflow.com/questions/785 ... -flex-item