web端css实现高斯模糊：filter/backdrop-filter

客户要求实现前端实现毛玻璃效果：即PS中的高斯模糊效果
翻了翻资料发现还真是能实现，甚至连正片叠底效果都能实现，效果叠加，不得不感慨css3的日益强大。

1. dropback-filter:

用法：直接作用于当前元素，当前元素及其父元素，或其背景都会被高斯模糊

/* SVG 过滤器 */
backdrop-filter: url(commonfilters.svg#filter);

/*  过滤器函数 */
backdrop-filter: blur(2px);    //模糊
backdrop-filter: brightness(60%);    //亮度
backdrop-filter: contrast(40%);    //对比度
backdrop-filter: drop-shadow(4px 4px 10px blue);    //图像后方阴影
backdrop-filter: grayscale(30%);   //灰度
backdrop-filter: hue-rotate(120deg);   //整体色调调整
backdrop-filter: invert(70%);    //反转图像颜色
backdrop-filter: opacity(20%);    //透明度
backdrop-filter: sepia(90%);    //转为棕褐色
backdrop-filter: saturate(80%);     //饱和度
 
/* 多重过滤器 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

看到浏览器兼容列表详情，我以为webkit内核浏览器就能兼容此属性，可经测试以下情况并不支持：

• 搜狗浏览器极速模式
• 360浏览器极速模式，
  火狐浏览器也是不支持的，有以上要求的，就要慎用了

2.filter

用法：需要作用于指定图片，才能实现当前图片的高斯模糊效果，如果仅仅作用于一空元素，并无作用，因此很多场景下，filter就很难适用了
但其功能强大：可设置属性诸如：亮度、透明度、对比度、色相、饱和度、灰度等复合效果
具体参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/*  values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

filter的兼容性就很好了，没有详测IE内核，只测试搜狗、360浏览器极速模式是ok 的，已满足我的要求

3.混合模式：background-blend-mode

来两张对比图，证明一下强大，
具体参考详解：https://www.runoob.com/cssref/pr-background-blend-mode.html


今天先到这里，下次再补充~