最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是 filter: blur(2px) ，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是 backdrop-filter: blur(3px) ，完美的实现了设计稿的要求。
下面就来看看这两个属性的区别，遇到的问题以及解决方案。
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加 filter: blur(2px) ，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用 backdrop-filter: blur(2px)即可。
这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter
常用的如下：（还可根据个人需要去下载安装其他滤镜）\x0d\x0a杂色滤镜\x0d\x0a\x0d\x0a杂色滤镜：有4种，分别为蒙尘与划痕、去斑、添加杂色、中间值滤镜，主要用于较正图像处理过程（如扫描）的瑕疵。\x0d\x0a\x0d\x0a扭曲滤镜\x0d\x0a\x0d\x0a扭曲滤镜（Distort）是Photoshop“滤镜”菜单下的一组滤镜，共12种。这一系列滤镜都是用几何学的原理来把一幅影像变形，以创造出三维效果或其他的整体变化。每一个滤镜都能产生一种或数种特殊效果，但都离不开一个特点：对影像中所选择的区域进行变形、扭曲。\x0d\x0a\x0d\x0a抽出滤镜\x0d\x0a\x0d\x0a抽出滤镜是PS里的一个滤镜，其作用是用来抠图。 抽出滤镜的功能强大，使用灵活，是photoshop的御用抠图工具，它简单易用，容易掌握，如果使用得好的话抠出的效果非常的好，抽出即可以扣烦杂背景中的散乱发丝，也可以抠透明物体和婚纱。\x0d\x0a\x0d\x0a渲染滤镜\x0d\x0a\x0d\x0a渲染滤镜可以在图像中创建云彩图案、折射图案和模拟的光反射。也可在 3D \x0d\x0a空间中操纵对象，并从灰度文件创建纹理填充以产生类似 3D 的光照效果。\x0d\x0a\x0d\x0aCSS滤镜\x0d\x0a\x0d\x0acss滤镜的标识符是“filter”，总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。 \x0d\x0acss滤镜分类可以直接作用于对象上，并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言，能产生更多变幻效果的则称为高级滤镜。\x0d\x0a\x0d\x0a风格化滤镜\x0d\x0a\x0d\x0aPhotoshop中“风格化”滤镜是通过置换像素和通过查找并增加图像的对比度，在选区中生成绘画或印象派的效果。它是完全模拟真实艺术手法进行创作的。 \x0d\x0a在使用“查找边缘”和“等高线”等突出显示边缘的滤镜后，可应用“反相”命令用彩色线条勾勒彩色图像的边缘或用白色线条勾勒灰度图像的边缘。\x0d\x0a\x0d\x0a液化滤镜\x0d\x0a\x0d\x0a“液化”滤镜可用于推、拉、旋转、反射、折叠和膨胀图像的任意区域。 \x0d\x0a您创建的扭曲可以是细微的或剧烈的，这就使“液化”命令成为修饰图像和创建艺术效果的强大工具。 可将“液化”滤镜应用于 8 位/通道或 16 \x0d\x0a位/通道图像。\x0d\x0a\x0d\x0a模糊滤镜\x0d\x0a\x0d\x0a模糊滤镜在Photoshop中模糊滤镜效果共包括6种滤镜，模糊滤镜可以使图像中过于清晰或对比度过于强烈的区域，产生模糊效果。它通过平衡图像中已定义的线条和遮蔽区域的清晰边缘旁边的像素，使变化显得柔和。
![java中，能用char[]定义字符串数组吗？如果可以，怎么定义它，怎么输出它？](/aiimages/java%E4%B8%AD%EF%BC%8C%E8%83%BD%E7%94%A8char%5B%5D%E5%AE%9A%E4%B9%89%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%95%B0%E7%BB%84%E5%90%97%EF%BC%9F%E5%A6%82%E6%9E%9C%E5%8F%AF%E4%BB%A5%EF%BC%8C%E6%80%8E%E4%B9%88%E5%AE%9A%E4%B9%89%E5%AE%83%EF%BC%8C%E6%80%8E%E4%B9%88%E8%BE%93%E5%87%BA%E5%AE%83%EF%BC%9F.png)
