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

问题描述

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

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

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

问题解答

其实大部分情况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;}回答2：

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