-1

I have a problem with my code. I need to have a well-visible image inside an opaque div. This is my code 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>

and this is my CSS3 code:

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

As you can see, I tried to fix the image in the last point of the CSS3 file, but unfortunately I did not.

So how can we arrange the right opacity of the image, leaving the div with this opacity? Thanks everyone in advance for future answers.

Kitt Mustang
  • 1
  • 2
  • short answer: you cannot – Temani Afif Feb 08 '19 at 01:00
  • But you can have a `visibility:visible` child within a `visibility: hidden` parent. – zer00ne Feb 08 '19 at 01:41
  • Possible duplicate of https://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css – 04FS Feb 08 '19 at 09:35
  • Possible duplicate of https://stackoverflow.com/questions/10021302/how-to-apply-an-opacity-without-affecting-a-child-element-with-html-css – 04FS Feb 08 '19 at 09:36

1 Answers1

0

An element's opacity applies to the element plus all of its descendant elements. So this can't really be done. But you could play around with setting .lower-container's background-color to an rgba value using the desired opacity. eg:

.lower-container{
     background-color: rgba(46, 46, 44, 0.5);
}
Chris House
  • 13
  • 5