html - css导航栏模糊，导航栏固定，随着页面滑动对下方页面产生模糊效果，如何实现？

Question

找了半天网上没找到能够动态影响下方页面，使之模糊的解决。
这是b站的一个模糊效果，静态的，原理是使用两张一样的图片，一张取部分模糊和另一张拼合。

我的想法是类似于AE的调节层加个高斯模糊，对下方图层有实时影响（页面滑动）
css的滤镜好像不能作用于下方图层，只能作用于某元素本身。

初学前端，请大佬们指点！

Answer 1

其实大部分情况b站的那种假模糊就足够使用了
你要的效果也能实现，挺麻烦的，兼容性还差，初入前端还是不要去折腾这种没啥太大意义的东西了，当然代码也是有的，我这里给个css3实现毛玻璃效果的demo，你自己可以看着能否触类旁通

body, main::before {
    background: url("tiger.jpg") 0 / cover fiexed;
}
main {
    positon: relative;
    background: hsla(0, 0%, 100%, .3);
    overflow: hidden;
}
main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    margin: -30px;
}

Answer 2

使用CSS3 - filter滤镜属性，模糊效果的值为blur(模糊值px)，而导航固定就用position属性，固定定位值为fixed。