起初对玻璃滤镜这种概念并没有。一直以为只能用图片实现，直到后来发现有些网站上通过WebGl可以实现，因此就比较痴迷于它了。但是往往代码比较复杂，对于我这种菜鸡来说还没到那一层，于是就想到了如何通过 svg滤镜 来实现。

实现原理

下面是实现玻璃纹理的关键代码片段，有些你可能不太了解，我会在知识点中一一列举出来的

html 复制代码

  <svg style="display: none">
        <defs>
      <filter id="image1">
        <feImage result="pict1" xlink:href="/images/displacement/1.jpg" x="0" y="0"
          width="527"
          height="336"
        ></feImage>
        <feDisplacementMap  scale="30" xChannelSelector="R" yChannelSelector="R"
          in2="pict1"
          in="SourceGraphic"
        ></feDisplacementMap>
      </filter>
    </defs>
 </svg>

其中<feImage>相当于引用的玻璃纹理图片，其中的图片长这样

通过<feDisplacementMap>将<feImage>展示出来的 result 结果作用在 位置替换滤镜 上，其中xChannelSelector="R" 相当于取RGB颜色通道中 R(红色) 来呈现。我们主要用到的是scale属性，通过设置大小，展现出背景位置偏移量（值越大，背景偏移越大，进而实现类似折射的效果）。

将以上组成好的<filter>应用到关键的css属性backdrop-filter中，就会得到你想要的效果了

css 复制代码

backdrop-filter: blur(2px) url(#image5);

知识点

<filter>：svg滤镜标签，可以在标签内部组合出你想达到的滤镜效果，一般可以在css中通过id属性引用。
<feImage>：获取外部图片来源。
<feDisplacementMap>：实际上是一个位置替换滤镜，就是改变元素和图形的像素位置的。在业界的主流应用是对图形进行形变，扭曲，液化。如果你之前有通过 svg实现水面波纹效果的话应该会很熟悉它。
backdrop-filter：为一个元素后面区域添加图形效果（我们这里就是为它添加了filter滤镜，实现了折射效果）

兼容性问题

⚠新版火狐浏览器，移动端浏览器不兼容

怀疑应该是backdrop-filter:url()url引用的问题，目前 火狐浏览器不支持 ，其它浏览器大多都是支持的。另外在移动端的兼容性也不好，所以 不建议在移动端使用。

后面是否能全面支持，让我们拭目以待吧~😄

自定义玻璃图案

想必能看到这里，接受他的缺点，说明你是真的喜欢(❤ ω ❤)这种效果，那么就让你看一下其它图案效果

你可以在贴图文件中下载已经为你准备好的贴图，有10几种图案。当然你可以自定义图案，不过要借助UI设计师或者自己动手PS了。

这里增加红色通道的显示比例，也就是之前在feDisplacementMap中和xChannelSelector="R"对应的R。然后将图片保存下来，应用到你的项目中🎉。

可能遇到的问题

贴图展示不全

因为feImage在滤镜的应用中无法平铺，所以大小尺寸只能为图片的像素尺寸，当你应用的元素尺寸大于当前贴图图片像素尺寸时，就会有空缺。解决方法就是贴图像素下载或制作时尽量像素尺寸调大一点。

如何弱化边缘效果

其实很简单，只需要用mask应用到玻璃层的标签上，就可以实现。

css 复制代码

 mask: linear-gradient(to left,transparent 0%,  #000 100%);

可能对你有帮助

深入理解SVG feDisplacementMap滤镜及实际应用

奇妙的 CSS MASK

svg滤镜-实现多种玻璃图案效果