如何向此视差网站添加内容？

如何解决如何向此视差网站添加内容？

我从 Codepen 下载了一个火警视差模板，并一直试图在其上添加内容。视差效果很好，我需要的是，在空白区域的视差之后添加内容（文本、图像等）。

我尝试过更改 CSS 代码并添加具有字体颜色属性等的文本标签。没有任何效果。

* {
  Box-sizing: border-Box;
}

html,body {
  
}

.content {
  right: 0;
  bottom: 0;
  margin-top: 300px;
  color: black;
}

.parallax {
  background-color: #FEDCC8;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  margin-left: -1500px;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
}

.parallax__cover {
  background: #2D112B;
  color: black;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
}

.parallax__content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.h1 {
  color: #00ff00;
}

.parallax__layer__0 {
  transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  transform: translateZ(0px) scale(1);
}

<!DOCTYPE html>
<html lang="en" >
<head>
    
  <Meta charset="UTF-8">
  <title>CodePen - Firewatch Parallax in CSS</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>

<!-- partial:index.partial.html -->
<div class="parallax">
    <div class="parallax__layer parallax__layer__0">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__1">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__2">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__3">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__4">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
    </div>

    <div class="parallax__layer parallax__layer__5">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
    </div>
    <div class="parallax__layer parallax__layer__6">
        <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
    </div>

    <div class="parallax__cover">
        <
    </div>

    
</div>




<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

以上是该项目的完整代码。所有图片均在线托管。

我希望在紫色背景上的视差图像之后添加内容。但是，我添加的任何内容都出现在背景之后或从不显示。

解决方法

在css中添加图片为background-img，在html中添加文字如下

<div class="parallax">
   <div class="parallax__layer parallax__layer__1">
      <span class="text0>text0</span>
   </div>


   <div class="parallax__layer parallax__layer__2">
      <span class="text>text1</span>
   </div>
</div>

css 中的背景图片：

.parallax__layer parallax__layer__1{
     background-image: url("layer1image.jpg");
  }

  .parallax__layer parallax__layer__2{
     background-image: url("layer2image.jpg");
  }

为了充分理解查看下面提到的链接的页面源
链接：https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm