0

I am fairly new, and I am faced with a problem that I cannot understand. I did a lot of research to try to solve the problem, but I did not come across anything convincing.

I apply a linear gradient to the body of the document but when I try to apply another color to one of the children the linear gradient hides the color that I am trying to apply to the element.

body {
  height: 100vh;
  background: linear-gradient(180deg, #7cffeb, #5839bc);
}

.main-container {
  background-image: url("../images/image.jpg");
  background-size: cover;
  opacity: 0.1;
  height: 100vh;
}

.content {
  position: relative;
  top: 10%;
  left: 25%;
  background-color: cornsilk; /* this line does not have any effect */
  background-color: cornsilk !important; /* this line either */
  height: 100%;
  width: 100%;
  opacity: 1;
}
<body>
    <div class="main-container">
        <div class="content"></div>
    </div>
</body>

If someone could enlighten me, it would help me.

Thank you !

UPDATE Thanks to your answers, I was able to solve the problem. I simply changed the structure of my HTML document.

<body>
<div class="main-container"></div>
<div class="content"></div>
</body>
Juste
  • 5
  • 2
  • `height: 100%` of the empty innermost element will computed to 0px unless it is absolutely or fix positioned. – Terry Jul 16 '20 at 18:10

1 Answers1

1

The issue is that you have opacity: 0.1 on .main-container. All children will inherit this opacity, and giving them opacity: 1 effectively means 100% of 0.1 - it will not overwrite the parent style.

lawrence-witt
  • 8,094
  • 3
  • 13
  • 32