磨砂玻璃磨砂玻璃前后前言：大家好，我是阿本，这里是《编程客厅》。这个话题我会用自己的理解来介绍前端艺术，尽量用有趣的语言和生动的例子来介绍更多的前端知识，欢迎各位新老朋友对前端提出自己的看法——结尾。本系列文章将推出100个案例进行分享，不定时更新，每月至少更新一次，欢迎订阅、收藏和评论，也欢迎您将本节目分享给更多人。山水相逢，让我们一起加入今天的“码字客厅”。本期节目我们将聊聊毛玻璃特效下的滤镜（filter）属性和css3的新特性backdrop-filter。我们在很多场合都会遇到磨砂玻璃特效的使用，比如windows左下角的任务栏、网易云音乐的每日音乐推荐、iPhone设计等，这种特效形成了一种全新的设计风格，业内称之为玻璃态。有人称其为新拟物化风格下的新风向标，那么随着时间的发展它将走向何方？敬请关注！哈哈哈，不过今天要说的是它的前世今生~第一个案例展示：1.传统filter2.css3新属性-backdrop-filter！[Uploading...]()filter:发音-英语[?f?lt?(r)]，一个CSS属性，用于将图形效果（例如模糊或颜色偏移）应用于元素。滤镜通常用于调整图像、背景和边框的渲染。滤镜很像我们手机里的美颜相机。可以通过设置属性值对图片进行特效处理，也可以应用于视频处理。属性值及应用方法如下：filter:none|模糊（）|亮度()|对比（）|阴影（）|灰度（）|色调旋转（）|反转（）|不透明度（）|饱和（）|棕褐色（）|url()none显示blur高斯模糊值css长度，不接受百分比值，默认值为0，该属性可用于磨砂玻璃亮度值值为[0,+x%]，该值不能为负数，当该值为0时，它会完全变黑，并且随着该值的增加，曝光会变得更加明显。如果对比度值为0%，图像将全黑。值为100%时图像保持不变。值可以超过100%，这意味着应用较低的对比度。如果未设置值，则默认值为1。drop-shadowshadowvalue该属性类似于box-shadow,filter:drop-shadow(offset-x,offset-y,blur-radius,color)，这里必须设置阴影偏移值（值越大，offset越多，双正阴影会出现在右上方）；blur-radius为可选值，值越大越模糊，不允许负数；color为可选值，阴影颜色可由colorsetting决定，否则为browsefilter默认颜色值示例：filter:drop-shadow(16px16px10pxblack)grayscale灰度值在0到100之间%，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%，超过100%时，效果不变，filter:saturate(50%);sepia()深褐色处理的百分比从0到100%，当超过100%时，效果不变，filter:sepia(0%);url()svgfilterprocessingfilter:url(svg-url#element-id),引入一个svg地址并指定一个class作为定义话说说了这么多其实我觉得这些设计属性很就像我回到初中小学时代拿诺基亚或者三星的时候，那时候的p图只能用一些简单的滤镜。第一次处理这个属性的时候，拿着键盘感觉就像回到了8年前的手机键盘，但是以现在的审美，确实是地狱般的滤镜，但是当我觉得这是一个鸡肋的属性时，结果让我大吃一惊。考察了svg滤镜的引入，这个属性对系统会有很大的提升。BeautificationStyle，其兼容性暂时被后来者backdrop-filter所超越。很多时候我们无法判断一个技能好用与否。别怕，光想不做就派上用场了才艺背景滤镜：CSS属性可以让你给画面后面的区域添加图形效果（比如模糊或者颜色偏移）元素，其属性值与过滤器一致。因为它适用于元素后面的所有元素，所以元素或其背景必须至少部分透明才能看到效果。区别：区别在于background-filter是分层设置的，它会在目标元素后面的区域设置图形效果，而不是图形的当前页面，也就是说它会影响底层而不影响图像本身；并且过滤器不仅会影响当前元素，还会被后代元素继承，作为空背景元素没有效果。另一方面，bcakdrop-filter的性能占用和兼容性远不如filter，这也是使用更多filter的原因。案例解读请下载源码并阅读评论。简单的说，传统的filter是通过添加伪元素和底层值来设置的，而backdrop-filter则是写在最后，通过设置透明度和调用自身：感谢MDN网站与各大平台分享知识或者，我只是总结知识后补充一些自己的浅见与大家分享。后面我们会继续介绍关于Linux和Git、JS、Vue等框架的知识，欢迎关注。那么山水再相会，下期见~~~
