改变图像存在的不透明度在一个不透明的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容器的背景色设置为一个RGBA值。例如：

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