毛玻璃之前世今生之filter与backdrop-filter

前言：

​ 大家好，我是Aben，这里是“Coding会客厅”，这个主题我将会用自己的理解介绍前端艺术，用尽量有趣的语言与生动的例子介绍更多前端方面的所见所闻，也欢迎各位新老朋友提出您在前端方面的见解，该系列文章将推出一百个案例作为分享，不定期更新，每月至少更新一次，欢迎各位订阅、收藏与评论，也欢迎你们将这档节目分享给更多的人。山水有相逢，让我们一起加入今天的“Coding会客厅”吧。

​ 今集我们会一起聊聊关于毛玻璃特效下的filter（滤镜）属性与利用css3的新特性backdrop-filter。我们在很多场合下都会遇到毛玻璃特效的使用，例如windows左下角任务栏、网易云音乐的每日音乐推荐、iPhone设计等，这个特效已经形成一种新的设计风格，业内称为glassmorphism，有人将其称作为新拟物风格下的新风向标，那么随着时间的发展，它又会走向何方？敬请期待吧！哈哈哈，不过今天我们要聊的是它的前世今生~

先上案例展示：

仓库地址：https://github.com/ohsogasne/100/tree/master/2-%E9%AB%98%E6%96%AF%E6%A8%A1%E7%B3%8A%E7%BB%83%E4%B9%A0

1.传统filter

2.css3新属性-backdrop-filter

filter:

读音-英 [ˈfɪltə®] ，CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。filter很像我们手机中的美颜相机，它通过设置属性值可以将图片进行特效化处理，而且也可以应用于视频处理，其属性值与应用方式如下表示：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

none 无显示

blur 高斯模糊 值为css长度，不接受百分比值，默认值为0，该属性可以使用于毛玻璃

brightness 明亮值 值为[0,+x%],数值不可为负数，当数值为0时，将为全黑，而会随之数值增大曝光更加明显

contrast 对比度 值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。

drop-shadow 阴影值 该属性与box-shadow类似，filter：drop-shadow（offset-x ，offset-y，blur-radius，color），其中阴影偏移值为必须设定 （数值越大偏移量越多，双正值阴影会出现在右上方）；而blur-radius为可选值，值越大越模糊，不允许为负数；color为可选值，可以通过颜色设置决定阴影颜色，否则为浏览器默认色值 举例：filter: drop-shadow(16px 16px 10px black)

grayscale 灰度 数值在0到百分百之间，0为原图原色（很多在哀节时调节网页颜色都会设置这个属性，如清明节或其他特定节日）举例：filter: grayscale(100%)

hue-rotate() 色相翻转值 默认值为0deg，虽然该值没有默认值但是我们都做到数值翻转一圈（360deg）也就回到了原点 举例：filter: hue-rotate(90deg)

invert() 反转输入图像 绿转红，黑转白，百分比从0到100%，当超过100%效果不变，举例：filter: invert(50%);

opacity() 透明度 该属性与opacity属性一致，百分比从0到100%，当超过100%效果不变，举例：filter: opacity(50%);

saturate() 饱和度 百分比从0到100%，当超过100%效果不变，filter: saturate(50%);

sepia() 深褐色处理 百分比从0到100%，当超过100%效果不变，filter: sepia(0%);

url() svg滤镜处理 filter: url(svg-url#element-id)，引入一个svg地址并指定一个类作为定义

其他话

​ 说了这么多，其实我觉得这些设计属性很像我回到之前拿诺基亚或三星的初中、小学日子，那个时候的p图就只能使用一些简单的滤镜，当我第一次处理这个属性的时候犹如手下的键盘回到到8年以前的手机键盘，而用现在的审美去看确实很阴间滤镜，而当我认为这个是个鸡肋的属性的时候结果却让我意外，在调查到引入svg过滤器后这个属性将大大提升系统性美化风格，并且其兼容性也是其后来者backdrop-filter所暂时无法超越的.

​ 很多时候我们无法判断一个技能是否有用，别怕，去扩展它会有用武之地的，一味的思考却不行动才会才华白费。

backdrop-filter：

CSS属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移），其属性值于filter一致。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

区别：

其区别在于backdrop-filter为层级设置，它会在目标元素后区域设置图形效果，而非图形当前页，也就是说将会影响底层而不影响图片本身；而filter不仅仅会影响当前元素，还会让后代元素继承，作为一个空背景元素则无效果。另一方面，bcakdrop-filter的性能占用性与兼容性都远远差于filter，这也是更多的使用filter的原因。

案例解读请下载源码后看注释

简单来说就是传统的filter是通过加入伪元素与底层数值设置而backdrop-filter是通过设置透明度与本身调用即可

写在最后：

感谢MDN网站与其他各大平台知识分享者，本人只是在将知识总结后加入自己一些拙见分享给各位。后面会继续推出Linux与Git、JS、Vue与其他框架等知识，欢迎关注。那么山水有相逢，我们下期再见~~~