首页 文章

如何实现模糊的视差背景

提问于
浏览 次
0

我的目标是使全屏视差背景模糊 .

问题是，当您模糊元素时，它不再跨越容器的整个大小（因为边缘模糊） . 我找到了一个建议使用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;
}
css

1 回答

  • 0

    考虑将 viewport 放在带有隐藏溢出的 viewport-wrapper 中？

    HTML

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

    CSS

    .viewport-wrapper {
    overflow: hidden;
}

    Codepen

    回复于

相关问题