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

本文主要是介绍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);  
}

这篇关于backdrop-filter 与 filter 模糊效果的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---