Изменить непрозрачность изображения, присутствующего в непрозрачном div

Question

У меня проблема с моим кодом.Мне нужно иметь хорошо видимое изображение внутри непрозрачного div.Это мой код HTML5:

<div class="container-fluid">
    <div class="lower-container">
        <img src="client/img/ui/frecciaLatoSx.png"> &nbsp;
        <img src="client/img/ui/buttonHotelView.png"> &nbsp;
        <img src="client/img/ui/bottoneNavigatore.png" style="filter:brightness(100%)">

    </div>      

, а это мой код CSS3:

.container-fluid{
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

.lower-container{
    background-color: #2E2E2C;
    opacity: 0.5;
    border-top: 2px solid hsl(45, 3%, 45%);
    border-bottom: 1px solid hsl(45, 3%, 45%);
    height: 50px;
    position: absolute;
    bottom: 0;
}

img{
    opacity: .9;
}

Как видите, я попытался исправить изображение в последней точке файла CSS3, но, к сожалению, я этого не сделал.

Так как же мы можем организовать правильную непрозрачность изображения, оставляя div с этой непрозрачностью?Спасибо всем заранее за будущие ответы.

Answer 1

Непрозрачность элемента применяется к элементу плюс все его дочерние элементы.Так что это на самом деле не может быть сделано.Но вы можете поиграть с установкой .lower-container background-color в значение rgba, используя желаемую непрозрачность.например:

.lower-container{
     background-color: rgba(46, 46, 44, 0.5);
}