How can a child override the opacity of the parent?

Question

Currently I'm working on a website for a community and its getting a bit difficult, I have a nice pink>orange gradient with a image below it with a opacity of 0.2, to show both. That looks like this.

As you can see, the logo also has the opacity. I already found something about the rgba-color, but that did'nt work.

How can I solve this problem? I want the image with the border to have a full opacity.

body {
  background-color: #f2f2f2;
  color: #404040;
}

div.navbar {
  height: 600px;
  background: rgba(255, 255, 255, 0.7);
  background-image: linear-gradient(25deg, #ec008c, #fc6767);
  margin-top: -10px;
  margin-left: -5px;
  position: relative;
  width: 105%;
}

img.logo {
  position: absolute;
  margin-top: 4%;
  margin-left: 25%;
  height: 40%;
  padding: 25px;
  border: 25px solid #f2f2f2;
  border-radius: 50%;
}

div.image {
  position: relative;
  height: 100%;
  opacity: 0.2;
  background-image: url("img/slide1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

div.nav {
  position: absolute;
  bottom: 0;
  margin-left: 600px;
  margin-bottom: 50px;
}

a.nav-item {
  color: #f2f2f2;
  font-weight: bold;
  font-size: 25pt;
  margin-right: 50px;
  text-decoration: underline;
}

a.nav-item:hover,
a.nav-item .active {
  text-decoration: overline underline;
}

<div class="navbar">
  <img class="logo" src="img/logo.png">
  <div class="image">
  </div>
  <div class="nav">
    <a class="nav-item">Home</a>
    <a class="nav-item">Twee</a>
  </div>
</div>

background-image can take both gradient and image. you need to set the gradient first with rgba() or hsla() color for the opacity and the image will lay beneath it. Possible duplicate : https://stackoverflow.com/questions/36679649/how-to-add-a-color-overlay-to-a-background-image/36679903 (use 2 differents rgba() colors for the gradient. the box-shadow option is useless to you here — G-Cyrillus, Feb 28 '19 at 22:10

score 1 · Accepted Answer · edited Mar 01 '19 at 05:50

Use the background property for both image and gradient. then take your gradient from the rgba equivalents of your hex values (Chrome dev tools color picker is good for this).

body {
  margin: 0;
}

div.navbar {
 height: 100vh;
  
  /*
    IMPORTANT BITS:
    - ADDED image and gradient to navbar background and
    - REMOVED opacity
    
    THE REST:
    The rest was just to make the demo look better/simpler
  */
 background:
    linear-gradient(25deg, rgba(236, 0, 140, 0.7), rgba(252, 103, 103, 0.7)),
    url(http://placeimg.com/1000/600/arch) no-repeat center;
  background-size: cover;

 position: relative; 
}

.logo-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 0;
  padding-top: 25%;
  border:25px solid #f2f2f2;
  border-radius: 50%;
  overflow: hidden;
}
.logo {
  width: 90%;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 5%;
}

<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
  <div class="navbar">
    <div class="logo-wrapper">
      <img class="logo" src="http://placeimg.com/200/200/tech/grayscale">
    </div>
  </div>
</body>
</html>

score 1 · Answer 2 · answered Apr 15 '21 at 20:26

Child can't override opacity of parent due to how opacity is managed by the browsers.

Simplest way to achieve this is to place the visual child after the parent and then use a negative margin-top to draw the child on top of the parent. You don't need absolute positioning.

.frame{
        background-color: #AAAAAA;
        opacity: 0.2;
        border-radius: 13px;
        padding: 21px;
        color: #000000;
        height: 73px;
}
.frametxt{
        margin-top: -73px;
        color: #000000 !important;
        opacity: 1.0;
}

How can a child override the opacity of the parent?

2 Answers2