Question

我的h1标题没有显示在我创建的背景之上我不知道它为什么会发生。 https://jsfiddle.net/b6gezctv/这是一个jsfiddle，因此您可以运行代码并查看它是否得到修复。

<!DOCTYPE html>
</html>
<head>
  <title>Coming Soon</title>
  <link rel="stylesheet" type="text/css" href="soon.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" 
  rel="stylesheet">
</head>
<body>

  <div class="heading">
    <h1>COMING SOON</h1>
      <hr>
  </div>

  <div class="start-1"></div>
  <div class="start-2"></div>
  <div class="start-3"></div>

</body>

h1 {
  text-align: center;
  color: white;
}

.start-1 {
  position: absolute;
  background-color: #202b36;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0;
  top: 0;
  min-width: 950px;
}

.start-2 {
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(https://server.pro/s/img/bg-pattern.png);
  background-color: transparent;
  background-repeat: repeat;
  width: 100%;
  height: 100%;
  opacity: 0.07;
  z-index: 1;
  min-width: 950px;
}

.start-3 {
  position: absolute;
  left: 0;
  top: 0;
  background-image: 
 url(https://farm3.staticflickr.com/2821/33503322524_4e67143f45_k.jpg);
  background-color: transparent;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.5;
  min-width: 950px;
}

Answer 1

这是因为您的start-1 start-2 start-3元素为position: absolute，并且它们覆盖了您的h1。您需要向position添加z-index和h1，以便可以看到它：

position: relative;
z-index: 100;

或者，由于您的hr课程中有heading，我建议您将position和z-index添加到整个班级，而不仅仅是h1 1}}元素

.heading {
  position: relative;
  z-index: 100;
}

Answer 2

CSS参数color的字体颜色（h1）为白色，因为您没有身体的背景或h1的任何父元素，它在白色上显示白色=不可见。

因此要么改变背景，要么改变字体颜色。

此外，您的其他元素包含position: absolute和位置left:以及top: 0，因此它们会覆盖h1更改这些位置值，或删除{{1}来自其他元素。

Answer 3

显然z-index不适用于静态定位元素，所以只需添加位置：相对于h1样式，它将起作用，如下所示：

h1 {
  text-align: center;
  color: white;
  z-index: 3;
  position: relative;
}

相关问题：z-index not working with position absolute

文本未显示在背景上

3 个答案: