Html Wordpress中的自定义视差

我在设计我的Wordpress网站的过程中，有着极其基本的编码知识。我已经完成了主页和内容页的设计，但是，只有一个操作尚未完成

我想包括视差效果，包括下面，在我的主页上，但不是作为标题。我的网页从标题开始，然后是导航栏，然后我想创建一个包含上面链接的视差效果的部分，有4个不同的层

CSS:

@import "compass/css3";

*{
  box-sizing: border-box;
}

html,
body{
  background-color: #FEDCC8;
}

.parallax {
  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;

  img{
    display: block;
    position: absolute;
    bottom: 0;
  }
}

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

$parallax__layers: 6;

@for $i from 0 through $parallax__layers {
  $x: ($parallax__layers - $i) / 2;
  .parallax__layer__#{$i}{
     transform: translateZ(-100 * $x#{px}) scale($x + 1);
  }
}

<div class="parallax">
  <div class="parallax__layer parallax__layer__0">
      </div>
  <div class="parallax__layer parallax__layer__1">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__2">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__3">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__4">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__5">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__6">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__cover"></div>
</div>

HTML:

@import "compass/css3";

*{
  box-sizing: border-box;
}

html,
body{
  background-color: #FEDCC8;
}

.parallax {
  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;

  img{
    display: block;
    position: absolute;
    bottom: 0;
  }
}

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

$parallax__layers: 6;

@for $i from 0 through $parallax__layers {
  $x: ($parallax__layers - $i) / 2;
  .parallax__layer__#{$i}{
     transform: translateZ(-100 * $x#{px}) scale($x + 1);
  }
}

<div class="parallax">
  <div class="parallax__layer parallax__layer__0">
      </div>
  <div class="parallax__layer parallax__layer__1">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__2">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__3">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__4">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__5">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__layer parallax__layer__6">
    <img src="data:image/png;image URL here"/>
  </div>
  <div class="parallax__cover"></div>
</div>

---

你能指导我实现这个目标吗？

一些HTML代码，看看这个结构将对我们解决这个问题有很大的帮助！现在的问题包括：）一些HTML代码来查看结构将大大有助于我们解决这个问题！包括在现在的问题中：）