登录页模糊背景效果实现方案

效果需求分析

需要实现全屏虚化背景 + 居中显示清晰卡片的效果，具体特征：

1. 全屏背景图使用高斯模糊效果
2. 中间卡片区域需要展示与背景图相同位置的未模糊内容
3. 卡片需要包含登录表单等交互内容

如图所示：

实现虚化，肯定首选filter。 首先，我们需要先将背景单独放出来，但是中间的小图与背景图关联，和背景图上的地点是关联显示的，所以需要我们先放两张背景图，使用before和after伪类，之后就可以将中心card展示出来啦。

    <div class="box">
        <div class="box-right">
            <div class="box-right-login">
                <div>用户登录</div>
            </div>
        </div>
    </div>
    
    <style>
    .box {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }
    .box::before{
       content: "";
        position: absolute;
        /* 扩展边缘消除白边 */
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background-image: url(/login.jpg);
        background-size: cover;
        background-position: center;
        filter: blur(5px);
        z-index: -1;
    }
    .box::after {
        content: "";
        position: absolute;
        top: 20%;
        left: 25%;
        width: 50%;
        height: 50%;
        border-radius: 10px;
        background-image: url(/src/assets/images/login.jpg);
        background-size: cover;
        background-position: center;
        z-index: 0;
    }
    .box-right {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .box-right-login {
        width: 400px;
        height: 400px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    </style>