Question

我正在创建一个应该具有视差效果的简单网站。最初它使用的是background-attachment: fixed;，但是这会导致每个卷轴重新绘制，导致一些明显的FPS下降。

这是期望的效果，在实际使用情况下，导致轻微的口吃：

body {
    padding: 0;
    margin: 0;
}

#container,
#container2 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
}

#container {
    background-image: url('http://fillmurray.com/1200/1200');
}

#container2 {
    background-image: url('http://placekitten.com/1200/1200')
}

#more-content {
    font-size: 48px;
    padding: 35vh 0;
    text-align: center;
    background-color: white;
}

<div id="container"></div>
<div id="more-content">
    Here's some more content
</div>
<div id="container2"></div>

作为一种解决方法，我创建了一个div并应用了一个::before伪元素position: fixed;，我通过z-index: -1;将其设置为后台。我添加了will-change: transform;以避免重绘问题。

body {
    padding: 0;
    margin: 0;
}

#container {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

#container::before {
    content: ' ';
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url("http://www.fillmurray.com/1000/1000");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    will-change: transform;
}

#more-content {
    text-align: center;
    font-size: 48px;
    padding: 50vh 0px;
    background-color: white;
}

<div id="container"></div>
<div id="more-content">
    Here's some more content
</div>

一旦我尝试创建一个第二个固定图像，就会出现问题，在“这里有更多内容”部分的下方。因为position: fixed;将元素从流中取出（尽管其父元素为position: relative），我无法找到合并第二个图像的方法，在我的第一个例子中保留了“擦除”效果。由于他们占据相同的空间，只显示一个图像。

我见过一些人提出类似的问题，虽然大多数都不是最近的，也没有任何答案。

我愿意接受建议，否则我将使用JavaScript解决方法。

多个固定背景，没有背景附件：已修复

0 个答案: