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);
}

更改不透明div中存在的图像的不透明度

1 个答案: