如何实现背景视差模糊

Question

我的目标是拥有一个模糊的全屏视差背景。

问题是，当模糊元素时，它不再跨越容器的整个大小(因为边缘模糊(。我发现了一个建议使用变换的例子：缩放以将其拉伸到比"封面"所需的大小稍大的大小，尽管现在这样做可以使背景在向下滚动页面时也慢慢向下移动(再次暴露模糊的边缘(。

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