Why is the text in my div not being displayed?-CodePudding

The html document:

html {
  background: url(./background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
}

#container {
  display: flex;
  flex-direction: row;
}

.col {
  flex: 1;
}

.column:first-child {
  flex: 3.5;
  height: 100vh;
}

.row {
  margin-top: 40%;
  background-color: black;
  opacity: 0.6;
  height: min(100px, 20%);
  display: flex;
  flex-direction: row;
}

img {
  opacity: 1;
  height: 100%
}

.column:last-child {
  flex: 6.5;
  height: 100vh;
  background-color: white;
}

<div id="container">
  <div >
    <div >
      <div >
        <img src="./image.png" alt="moon.png">
      </div>
      <div >
        <h1>Hello</h1>
      </div>
    </div>
  </div>
  <div ></div>
</div>

When running the above code in the browser, the h1 element in the 'col' class div is not being shown. I am not able to understand the reason why? Is there an element covering it?

I've tried removing the image and changing a few stylistic choices of the stylesheet including removing the flexbox in its entirety (of the row class and/or col class), yet there does not seem to be much of a difference.

CodePudding user response：

Simply, make text color different than background color. color: white;

.row {
    margin-top: 40%;
    background-color: black;
    color: white;
    opacity: 0.6;
    height: min(100px, 20%);

    display: flex;
    flex-direction: row;
}

CodePudding user response：

Like @Ghassan Elias said, the text color of the h1 element is the same as the background color. For simplicity purposes, you can simply change the text color of the h1 element:
<h1 style="color:white;">Hello</h1>