SVG滤镜实现背景毛玻璃实例页面

CSS代码：

#drag {
    position: absolute;
    width: 150px; height: 150px;
    display: grid;
    place-items:center;
    border: 1px solid;
    user-select: none;
    cursor: move;
    z-index: 1;
}
@supports (background: -moz-element(#a)) and (not (backdrop-filter: blur(0))) {
    #drag::before {
        content: '';
        position: absolute;
        width: inherit; height: inherit;
        background: -moz-element(#main) no-repeat;
        background-position: var(--position);
        filter: url(#blur);
        z-index: -1;
    }
}
@supports (backdrop-filter: blur(6px)) {
    #drag {
        backdrop-filter: blur(6px)
    }
}

HTML代码：

<div id="drag" draggable="true">拖拽我</div>

<svg width="0" height="0" style="position:absolute;">
    <filter id="blur" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="6" edgeMode="duplicate"/>
      <feComponentTransfer>
          <feFuncA type="discrete" tableValues="0 1"/>
      </feComponentTransfer>
    </filter>
</svg>