Vue中图片实现毛玻璃效果

举例（Ant Design 的 Image 组件的官方示例图片）：

实现：

 <div class="background">
      <div class="background-content">
        <div class="background-content-image"></div>
        <img
          src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
        />
      </div>
    </div>

<style>
  .background {
    width: 260px;
    height: 200px;
    overflow: hidden; //避免虚化的阴影和边框会溢出。
  }

  .background-content {
    width: 260px;
    height: 100%;
    position: relative;
    /* 让图片居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .background-content-image {
    position: absolute;
    /* 重点，不能让背景大过于展示的图片 */
    z-index: -1;
    width: 260px;
    height: 100%;
    filter: blur(8px); //重点：使用的是 filter 来实现的
    background-image: url(https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp); //两个一样的
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  img {
    max-height: 100%;
  }
</style>