I have encountered an issue while trying to place my logo on a black background with transparency. Instead of the background being transparent, now my logo is also becoming transparent which was not my intention.
Does anyone have any suggestions or ideas on how I can achieve this?
https://i.sstatic.net/4Tfq1.png
This is the HTML code I am using:
<div class="my-banner">
<img class="banner" src="images/slider.jpg" alt="banniere">
<div class="background-opacity">
<img class="logo" src="images/logo.png" alt="logo" >
</div>
</div>
And here is the CSS code:
.banner{
height: 530px;
width: 1366px;
position: absolute;
}
.background-opacity{
background-color: black;
opacity: 0.5;
height: 100px;
width: 1366px;
}
.logo{
padding: 20px 0px 0px 35px;
}