JS和CSS实现毛玻璃图片模糊效果

`这个元素的子节点是否有变化。 如果监听到发生变化了,给这个节点隐藏起来同时不影响文档布局

使用MutationObserver监听子节点是否发生变化

<title>使用毛玻璃实现图片模糊效果</title>
<div>
      <div>
        <div>
          <div>成都 | 28岁</div>
          <div> 研究生</div>
          <div>Ta看过你10次</div>
        </div>
      </div>
    </div>

可以优化一下吗？

有机制的小伙伴说：我们可以直接去监听 id = imgbox这会元素。 如果这个元素的子节点和子节点的属性发生变化了。 我们直接将这个 id = imgbox 隐藏起来。 这样就不需要写2个监听器了,大佬果然有点东西。 那我们就按照这个思路再来优化一下

监听子节点和子节点的属性是否发生变化

<title>使用毛玻璃实现图片模糊效果</title>
<div>
      <div>
        <div>
          <div>成都 | 28岁</div>
          <div> 研究生</div>
          <div>Ta看过你10次</div>
        </div>
      </div>
    </div>

最后说一下

看到最后，我们会发现写的更多的是关于MutationObserver的使用。 而不是毛玻璃的实现。 如机智的小伙伴们说的那样:通过网络就可以看到真实的图片。 因此：要想真正实现这个效果，必须从服务端返回一张模糊图片。 否则，都有办法看到真实的图像