概念

首先明确下概念，因为可能别人不这么叫。

我这里说的模糊只得是元素自己的模糊；而背景模糊，指的是透过元素看到的下层元素是模糊的。

模糊

这个相信大家也都用过，例行贴个代码搞定：

.blue-dom{
    filter: 
          blur(5px)   // 像素值，越大越模糊        
    ;
}

顺便复习下其他的属性，具体如下：

image.png

注意： 这个filter影响的是当前元素，比如加了模糊，当前dom上的字也会跟着一起模糊，这点请注意。

5px的模糊程度大约这么多👇：

image.png

背景模糊

背景模糊其实就是用到：

 -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

需要注意的是，你设置背景模糊的背景，需要是半透明的，否则看不到下层，再模糊也没有意义了。

兼容性：

image.png

可以看到主流浏览器的最新很多版本都已经完美支持。

backdrop-filter 所有api

这里也列下所有api， 方便学习查阅

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
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(90deg); /* 色相旋转 */
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%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;