文章/答案/技术大牛

发布

问文本未显示在背景上
EN

Stack Overflow用户

提问于 2017-06-29 06:24:44

回答 3查看 2.7K关注 0票数 1

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

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-06-29 06:31:31

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

position: relative;
z-index: 100;

或者，由于heading类中有一个hr，因此我建议将position和z-index添加到整个类中，而不仅仅是h1元素

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

票数 3

Stack Overflow用户

发布于 2017-06-29 06:36:03

CSS参数您的h1的字体颜色(color)是白色的，因为您没有该h1的正文或任何父元素的背景，所以它在白色上显示为白色=不可见。

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

此外，您的其他元素具有position: absolute和position left:和top: 0，因此它们覆盖了h1更改这些position值，或者从其他元素中删除该position: absolute。

票数 0

Stack Overflow用户

发布于 2017-06-29 06:37:43

显然，z索引不适用于静态定位的元素，所以只需添加position: relative h1样式就可以了，如下所示：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44813488

复制

相似问题

问文本未显示在背景上
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本未显示在背景上EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本未显示在背景上
EN