网易云音乐的音频播放器做的特别赞，尤其是背景模糊效果。有图为证：
那这种效果在 web 中是如何实现的呢？用 Chrome 开发工具看看它的具体实现：
原来是一张图，通过图片的地址，可以看到其实是下面这张图。
看到这里感觉有点小小的失望，本来以为用了什么高科技实现的，却是一张图。但是不得不说，为了实现这种效果他做了很多事情，大多数场景下，服务端并不会给我们提供这样的图，咋么办？
我用 filter 简单实现了一个，效果如下：
仔细看网易云音乐的实现，有一些知识值得我去学习。下面是我不使用模糊图片实现的方式：
1、兜底策略
假如高斯模糊效果图加载不出来需要有一个兜底策略，能够让用户看到播放器上面的文字，比如歌词。他的做法是同时设置 background-image 和 background-color ，这样如果加载不出来图片的时候，使用背景色。那么我的实现方式也做了这个兜底策略：
2、背景前添加一个灰色的蒙层
如果图片有太多的白色，这时如果文字也是白色，导致看不清楚文字，需要一个灰色的蒙层。
3、添加高斯模糊效果，替代图片
大家加油！
推荐阅读：
