为何div中的h1文本无法显示？前端页面元素显示问题咨询

运行以下HTML和CSS代码时，带有col类的div中的<h1>元素无法显示，尝试移除图片、修改flex布局后仍无明显改善，想知道是否存在元素遮挡或其他原因。

代码示例 #

CSS代码 #

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;
}

HTML代码 #

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

问题原因 #

不是元素遮挡，核心问题是文字颜色与背景色过于接近，肉眼无法分辨：

• .row设置了background-color: black和opacity: 0.6，背景呈现深灰色；
• <h1>默认文字颜色为黑色，和深灰色背景几乎融为一体，看起来像是“不显示”；
• 另外，<h1>自带上下外边距，.row的固定高度可能导致文字被容器边缘裁剪，但这不是主要原因。

解决办法 #

最简单的方式是给<h1>设置和背景反差明显的颜色，同时让文字在容器内居中避免裁剪：

.row h1 {
  color: white;
  margin: auto; /* 适配flex容器，实现上下左右居中 */
}

也可以直接调整.row的背景色，只要能让文字和背景形成足够对比度即可。

内容的提问来源于stack exchange，提问作者Mostack