Fatal编程技术网
  • css/
  • Css 文本未显示在背景上

Css 文本未显示在背景上

css

Css 文本未显示在背景上,css,Css,我的h1标题没有显示在我创建的背景之上，我不知道为什么会发生这种情况。这是一个JSFIDLE，您可以运行代码并查看它是否得到修复 <!DOCTYPE html> </html> <head> <title>Coming Soon</title> <link rel="stylesheet" type="text/css" href="soon.css"> <link href="https://fonts.

我的h1标题没有显示在我创建的背景之上，我不知道为什么会发生这种情况。这是一个JSFIDLE，您可以运行代码并查看它是否得到修复

<!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>
这是因为您的
start-1
start-2
start-3
元素是
position:absolute
，它们覆盖了您的
h1
。您需要将
位置
和
z索引
添加到
h1
中，以便其可见：

position: relative;
z-index: 100;
或者，由于在
标题
类中有一个
hr
，我建议将
位置
和
z-index
添加到整个类中，而不仅仅是
h1
元素

.heading {
  position: relative;
  z-index: 100;
}
CSS参数您的
h1
的字体颜色（
color
）是白色的，并且由于您没有该
h1
的主体或任何父元素的背景，因此它显示为白色=不可见

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

此外，您的其他元素有
位置：绝对
和
位置左：
和
顶部：0
，因此它们覆盖了
h1
更改这些位置值，或者从其他元素中删除
位置：绝对
。

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

h1 {
  text-align: center;
  color: white;
  z-index: 3;
  position: relative;
}
相关问题：

这不是问题的原因，但在开始标记之后还有一个结束HTML标记。而且，正如我在回答中所写的，您仍然看不到h1，因为它在白色背景上有白色文本颜色，所以请更改文本颜色或背景。 
h1 {
  text-align: center;
  color: white;
  z-index: 3;
  position: relative;
}