I have a front end project where I have a square item over an image . My square is suppossed to be fully red but losses opacity . This is how the square looks like in my page instead of being fully red : 
My code :
.html,.body{ background-size: cover; } body{ overflow-x: hidden; margin:0; background: rgba(0, 0, 0, 0.1); } .welcome-container{ position: relative; top:0px; left: 0px; width:100%; height:550px; margin:0px; background-position: center; background-repeat: no-repeat; background-size: cover; } .welcome-pic{ position: relative; } .welcome-pic img{ background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg'); } .ds-square{ background-color:red; height: 50px; width:50px; position: absolute; top: 2px; left: 2%; opacity:1; } .welcome-pic img { width:100%; height:550px; opacity: 0.8; } .inside-pic{ position:absolute; top:30%; left:50%; font-size: 60px; transform: translate(-50%, -50%); } .inside-pic h3{ font-size:18px; }<div class = "welcome-container"> <div class = "welcome-pic"> //my square <div class="ds-square"> </div> <img src = "IMAGES/welcome_pic.jpg" alt="#"> <div class = "inside-pic"> FLY WITH DS <br/> AIRLINES <h3>Flights from or towards Athens ! Fly secure and comfortable with us! </h3> </div> </div> </div>Trying opacity:1; on the square does not change the result . I would appreciate your help with this simple task . Thank you in advance
opacity: 1, it will appear translucent if any of its parents have opacity < 1.opacity: 1