模拟哔哩哔哩导航条模糊效果

在自己之前做的一个视频播放的网站的项目中，由于没有专业的设计，只有一个PS大神。所以在做页面的时候，如何布局如何设计页面的责任就落在了我这个前端学徒工的身上。

那时候自己用的最熟练的就是盒子模型，所以我就会把页面整体划分为一个一个的盒子，盒子间的互相嵌套构成了整个页面。第一个难点就是做一个导航条，如果仅仅是做一个导航条并不复杂，但自己初生牛犊不怕虎，觉得必须做一个有逼格的导航条，所以一眼就瞄上了自己最喜欢的视频播放网站——哔哩哔哩。

---

首先，它的导航条是这样子的：

 

这是我发布这篇文章时截的图，距离我做那个项目已经过去两三个月了，可见这种导航条是多么受欢迎Y(^o^)Y。

以下是我模仿实现的导航条：

要达到这个效果，需要明白实现的思路：

（1）首先，导航条下面有一张图片，它们不在同一层，将导航条设置为position:absolute;可以实现。

（2）其次，导航条需要时透明的，这样才能看见下面。需要一个opcity或者在设置background-color属性是给一个alpha值。

（3）导航条要有一个模糊度，使用filter属性，给blur设置一个值可以实现。

按照这个思路走下来，最终实现了这样一个效果：

对比一下就能发现，并没有那个模糊的感觉，不管怎么调blur的值都不行。当时是有一个白色背景的，在这个白色背景上设置一个透明度。可以发现完全不是一回事，最后经过反复去看哔哩哔哩的页面代码，才发现，其实在导航栏的下面是有一张背景图片的，这个背景图片和导航栏下面的背景图片是完全一样的。所以说在思路上出错了：

我们不应该去看下面的那张图片，而是通过给导航栏加背景图片，去看它自己的图片，这样才能达到那样的效果。其他的不变，给导航栏加一个background-image属性，同时overflow:hidden，就搞定了。