Question

css如何实现动态模糊遮罩效果

像win10开始菜单那种效果，我想做成网页固定的导航菜单，被导航遮住的内容模糊化（鼠标滚动到不同位置实时模糊背景）。不是简单的bulr滤镜哦
效果如下图绿色半透模糊导航栏所示：





Answer 1

不是很明白你要的是什么效果，既然是导航，本来z-index就会高于内容，不会影响误操作到内容，没必要做遮罩层。鼠标放到哪，哪模糊，用a:hover实现就行了，你如果要遮罩整个界面而不只是导航下面那部分，那做一个遮罩层就行了，做成半透明，控制他的display在none和block之间变换，绑定移入移出事件给导航的各个元素。

追问

导航遮住的地方模糊。你可以想象下，当你浏览网页内容时，导航所遮住的内容肯定是变化的，这就相当于导航是一个模糊的遮罩，遮罩上方的文字（菜单）清晰可见，遮罩下方背景模糊。
若能实现，求demo~