如何给网站顶栏菜单加上动态模糊的毛玻璃效果？

Question

有些类似B站的顶栏，但B站顶栏不是固定的，我想做的是固定顶栏，同时也能动态模糊背景，也就是把页面拉下来，让菜单遮住的任意位置都是模糊的，请问如何实现？

之前已经有人问过类似的问题
https://segmentfault.com/q/10...

给出的解决方法是需要加张跟背景同样的background-image图片，两张图片重叠来达到局部模糊效果，只能说是静态模糊（B站用的就是此方法）。求高手赐教动态模糊的方法！

Answer 1

B站用的是css3 filter过滤器 filter:blur(5px)

Answer 2

css3的过滤器blur就是模糊的实现、不知道题主想要的具体是什么样的效果

Answer 3

推荐filter:blur(10px); 高斯模糊

Answer 4

你们都没懂题主是啥意思，题主的意思是知道css3 filter blur，但是如果用的话得设置背景才能进行blur操作，题主想问的是除了设置和要模糊的地方一样的背景图设置blur以外，怎么能自动生成模糊效果（不用设置background） 就像有个遮罩一样

题主可以看一下这俩
https://www.wikimoe.com/?post...
https://developer.mozilla.org...

用backdrop-filter做，不过现在是个实验性属性