backdrop-filter 与 filter 模糊效果的区别

介绍

使用 backdrop-filter 与 filter 都可以写出高斯模糊的效果，但是两者使用起来还是有区别的，而且使用的目标也不同，具体介绍如下：

区别

1. backdrop-filter： 使背景模糊，不会影响到背景下面的图片
2. filter ： 通常是定义 img的可视效果 ，修改图片的模糊效果，值越大越模糊

效果

两者的使用效果如下：

1. backdrop-filter：
   
2. filter ：
   

代码

1. backdrop-filter：

div {
  position: absolute;
  left: 0;
  top: 0;
  background: #FFCA7B;
  /* backdrop-filter  让背景模糊 */
  backdrop-filter: blur(5px);
}

2. filter ：

img {
  height: 320px;
  width: 100%;
  /* filter滤镜属性： blur 给图像设置高斯模糊 值越大越模糊，不接受百分比值*/
  filter: blur(5px);  
}