如何实现登录表单区域背景图不模糊、外部背景图模糊效果

核心思路 #

放弃给全局背景直接添加模糊的方式，改为三层结构实现：

1. 底层：清晰的全屏背景图
2. 中间层：全屏的模糊遮罩
3. 顶层：表单容器，内部通过伪元素显示与底层对齐的清晰背景，再叠加半透明内容层

修改后的完整代码 #

CSS 代码

/* 底层：清晰的全屏背景 */
.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://i.ibb.co/DWvpCWD/login-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 中间层：全屏模糊遮罩，实现外部区域模糊 */
.bg-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1;
}

/* 表单容器：控制整体定位 */
.bg-text {
    color: white;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 0;
    display: flex;
    justify-content: center;
    border-radius: 3px;
    width: 90%;
    max-width: 300px;
    /* 为伪元素提供定位基准 */
    position: relative;
}

/* 表单下方的清晰背景：通过伪元素实现，与底层背景对齐 */
.bg-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url("https://i.ibb.co/DWvpCWD/login-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    border-radius: 3px;
}

/* 表单内容层：半透明背景，覆盖在清晰背景上方 */
.bg-text .row {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 40px;
    border-radius: inherit;
    width: 100%;
}

HTML 代码

<div class="bg-image"></div>
<div class="bg-blur"></div>
<div class="bg-text">
    <div class="row">
        <div class="login-register">
            <a href="/login" class="active">Login</a>
            <a href="/register">Register</a>
        </div>

        <div>
            <form action="post" class="form">
                <div class="input-group">
                    <label for="username">Username</label>
                    <input type="text" name="username">
                </div>
                <div class="input-group">
                    <label for="password">Password</label>
                    <input type="password" name="password">
                </div>

                <div class="checkbox">
                    <input class="checkbox-effect checkbox-effect-1" id="get-up-1" type="checkbox" name="remember">
                    <label for="get-up-1">Remember Me</label>
                </div>

                <button type="submit">Login</button>

                <a class="forgot-password" href="">Forgot Password?</a>
            </form>
        </div>
    </div>
</div>

关键调整说明 #

• 拆分背景结构：将原单一模糊背景拆分为「清晰背景层」和「模糊遮罩层」，避免全局模糊影响表单区域
• 表单伪元素：通过::before伪元素在表单容器内生成清晰背景，利用transform: translate(-50%, -50%)与底层背景完全对齐
• 层级控制：通过z-index确保层级顺序为：清晰背景 < 模糊遮罩 < 表单清晰背景 < 表单半透明内容层
• 样式迁移：将原表单的内边距和半透明背景移到内部.row容器，避免遮挡伪元素的清晰背景

内容的提问来源于stack exchange，提问作者Briant Jasper