更改不透明 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 的背景颜色设置为 rgba 值。例如：

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