Question

我的目标是使全屏视差背景变得模糊。

问题是，当您模糊元素时，它不再占据容器的整个大小（因为边缘模糊）。我发现了一个示例，建议使用transform：scale来拉伸它，使其长度略大于“ cover”所需的大小，尽管现在这样做了，因此，当您向下滚动页面时，背景也会缓慢向下移动（再次暴露出模糊的边缘。

HTML

<div class="viewport"></div>

CSS

.viewport {
    background-image: url("images/img1.jpg");
    background-attachment: fixed;
    filter: blur(7px);
    position: relative;
    transform: scale(1.1);
    background-size: cover;
    background-position: center;
    height: 130vh;
    z-index: -1;
}

Answer 1

考虑将viewport放入具有隐藏溢出的viewport-wrapper中吗？

HTML

<div class="viewport-wrapper"><div class="viewport"></div></div>

CSS

.viewport-wrapper {
    overflow: hidden;
}

Codepen

如何实现模糊的视差背景

1 个答案: