前端css 页面高斯模糊效果

问题：前端如何制作高斯模糊的背景图

最近在开发模仿APP页面，制作mp3播放器背景的时候，需要用到高斯模糊的背景图，前端如何实现呢？

这时候我们就要说到 CSS 3 中的一个属性Filter 了。

先说案例吧，效果图如下：

<div class = 'playerBox'>
<img class="bg_color" src="http://edit.2or3m.com/subject/php/20180109/0/HDE6TPj5Tc.jpg"/>
</div>

.playerBox{
width: 100%;
height: 422/@rem;
position: relative;
overflow: hidden;  /*这个是必须加的，否则会有阴影层*/
}
.bg_color{
width: 100%;
height: 100%;
position: absolute;
-webkit-filter: blur(60/@rem);
-moz-filter: blur(60/@rem);
-o-filter: blur(60/@rem);
-ms-filter: blur(60/@rem);
filter: blur(60/@rem);
}

Filter-css3属性

CSS滤镜（filter）：

提供的图形特效，像模糊，锐化或元素变色。

过滤器通常被用于调整图片，背景和边界的渲染。

名称	说明
初始值	none
适用元素	图片元素、背景图元素、文字内容等，即所有元素使用
继承性	不继承
适用效果	视觉处理
JS语法	object.style.WebkitFilter= “blur(20px)”

属性：

属性名	属性介绍	填写方式
none	无效果	默认值
grayscale	灰度	百分比
sepia	褐色	百分比
saturate	饱和度	百分比
hue-rotate	色相旋转	deg
invert	反色	百分比
opacity	透明度	百分比
brightness	亮度	百分比
contrast	对比度	百分比
blur	模糊	px
drop-shadow	阴影	h-shadow v-shadow blur spread color

用法：

1.添加属性：-webkit-filter: 属性名(属性值);

2.复合写法 : -webkit-filter: 属性名1(属性值1) 属性名2(属性值2) 属性名3(属性值3);

Filter() 函数

filter()函数接受两个参数：

filter(<url>, <filter-function-list>)

其中是指一个图像，是一个过滤器。

这两者结合在一起将会返回一个处理过的新图像。

例如：

.element {
background: filter(url(path/to/img.jpg), blur(5px));
}

Filter相关链接：https://www.jianshu.com/p/afe2a6a203c2