css实现毛玻璃效果

1.我们知道，毛玻璃效果 backdrop-filter就很方便，但是它的兼容性非常差。

2.如何利用一些技巧性的操作，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中。

3.使用 background-attachment: fixed 兼容静态背景图

.loginContent{
  height: 100%;
  background: url("/assets/loginPage/loginPageBcg.jpeg") center center no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  
  .login-form {
    min-width: 600px;
    border-radius: 10px;
    overflow: hidden;
    // backdrop-filter: blur(3px);
    position: relative;
    &::before{
      width: 100%;
      height: 100%;
      content: "";
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      background: url("/assets/loginPage/loginPageBcg.jpeg") center center no-repeat;
      background-size: 100% 100%;
      background-attachment: fixed;
      filter: blur(4px);
      z-index: 0;
    }
    box-shadow:  5px 5px 20px #bebebe,-5px -5px 20px #ffffff;
  }

4.效果图