CSS中如何使用高斯模糊

高斯模糊

1.首先来认识一下Filter-css3属性：提供的图形特效，像模糊，锐化或元素变色。
过滤器通常被用于调整图片，背景和边界的渲染。

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

初始值 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

2.首先高斯模糊的用法很简单用法：
1.添加属性：-webkit-filter: 属性名(属性值);
2.复合写法 : -webkit-filter: 属性名1(属性值1) 属性名2(属性值2) 属性名3(属性值3);

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

//其中是指一个图像，是一个过滤器。
filter(<url>, <filter-function-list>)

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

知道了用法来个简单的案例
先看看效果图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 800px;height: 800px;position: relative;background: url("../img/7.jpg") no-repeat fixed;padding: 1px;box-sizing: border-box;z-index: 1;}.father::after {content: "";width: 100%;height: 100%;position: absolute;background: inherit;filter: blur(8px);z-index: 2;}.son {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;text-align: center;z-index: 11;font-size: large;}</style>
</head><body><div class="father"><div class="son">Background</div></div>
</body></html>

实现的原理就是在父容器设置了背景图片后，设置伪元素重叠并且设置模糊，绝对定位覆盖父元素即可。这样父容器中的子元素便可不受模糊度影响。
注意：要注意的地方是要使用z-index确定层级关系，必须确保子代元素（也就是这里的drag）是在最上层的。不然子代元素的文字是不会出现的。

背景局部清晰

先来看看效果图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 800px;height: 800px;position: relative;background: url("../img/7.jpg") no-repeat fixed;padding: 1px;box-sizing: border-box;}.father:after {content: "";width: 100%;height: 100%;position: absolute;background: inherit;filter: blur(3px);z-index: 1;}.son {position: absolute;left: 40%;top: 30%;width: 200px;height: 200px;text-align: center;background: inherit;z-index: 15;box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);}</style>
</head><body><div class="father"><div class="son">Background</div></div>
</body></html>

这个实现原理与上一个案例类似，主要就是要应用好background:inherit这个属性，背景的继承。这里不能用transform这个属性，不然背景会偏移，导致达不到清晰的效果。

再来个过渡动画的渐渐显示高斯模糊来练练手

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@-webkit-keyframes blur {0% {/* Chrome, Opera */-webkit-filter: blur(20px); -moz-filter: blur(20px);     -ms-filter: blur(20px);filter: blur(20px);}50% {-webkit-filter: blur(15px);-moz-filter: blur(15px);-ms-filter: blur(15px);filter: blur(15px);}100% {-webkit-filter: blur(5px); -moz-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);}
}img{animation: blur 5s linear 0s 3;
}</style>
</head>
<body><div><img src="./img/7.jpg" alt=""></div>
</body>
</html>

使用CSS3中的animation属性过渡这个模糊图片就能完成整个效果，有兴趣的可以去试一下。