Question

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

我是不是错了？

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

修改对不起我虽然提供链接会让你更容易检查代码，而不是阅读并尝试理解粘贴的代码片段。

我想对我网站的各个部分进行视差效果。

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

<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

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

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

Answer 2

添加

background-attachment: fixed;

到你的

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

或实际上名为

的类

parallax__layer--back

修理了这件事。

编辑：（http://i.imgur.com/rV1CDho.png）这很有效，先生。

纯CSS视差效果问题

2 个答案: