纯CSS视差效果问题

Question

我的纯 css 视差似乎有问题，我使用的是 this 文章中的概念。然而，这似乎根本不适合我。

我是不是做错了？

您可以使用调试器检查我的代码 here。

编辑： 抱歉，尽管提供 link 会让您更轻松地检查代码，而不是阅读和尝试理解粘贴的代码片段。

我想在我网站的部分上有视差效果。

在这里你可以看到我的 HTML，还有更多部分，但我目前正试图让我的 header 使用视差滚动背景：

<body class="parallax">
<header class="parallax__group">
  <div class="parallax__layer parallax__layer--back darken"></div>

  <div class="parallax__layer parallax__layer--base flex alignvcenter">
    <div id="hdr-logo">
      <img src="images/logo.svg" alt="Mobile Paint Solutions" class="responsive-img">
    </div>
    <div id="hdr-hint">
      <img src="" alt="" class="responsive-img">
    </div>
    <div id="hdr-nav">
      <nav>
        <a href=""><span>Home</span></a>
        <a href=""><span>About</span></a>
        <a href=""><span>Gallery</span></a>
        <a href=""><span>Reviews</span></a>
        <a href=""><span>Pricing</span></a>
        <a href=""><span>Contact</span></a>
      </nav>
    </div>
  </div>

</header>

这是我的 LESS 样式：

    .parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
  transform: translateZ(-2px) scale(3);
}

但是目前背景根本没有动，谁能解释一下？

Answer 1

添加

background-attachment: fixed;

给你的

<div class="parallax__layer parallax__layer--back darken"></div>

或者实际上 class 命名为

parallax__layer--back

修复了问题。

编辑： (http://i.imgur.com/rV1CDho.png) 这有效，先生。

Answer 2

我认为效果（parallax 或无效）不起作用的原因是您使用了 <body> 作为宿主元素。可能它使用的某些属性对 <body> 没有影响。我假设我们正在谈论 perspective 及其供应商前缀的对应物。

明显的解决方法是使用 <div> 作为主机，而不是 <body>。我尝试使用您链接的网站中的一些样式和图像，但看起来不太好。你明白了。

纯CSS视差效果问题

Pure CSS Parallax effect issue

css

parallax