Blazor Server应用加载时如何模糊页面（除加载动画外）

步骤1：修改Razor页面代码 #

在加载动画的条件判断中，添加一个全屏遮罩层，放在动画元素之前：

@if (Loading_spinner == true)
{
    <!-- 全屏模糊遮罩层 -->
    <div class="page-blur-overlay"></div>
    <!-- 加载动画 -->
    <div class="spinner"></div>
}

步骤2：更新CSS样式 #

添加遮罩层的样式，并调整加载动画的定位和层级，确保动画显示在遮罩层之上：

/* 全屏模糊遮罩层 */
.page-blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* 可选：半透明背景增强模糊效果的视觉感知 */
    background-color: rgba(255, 255, 255, 0.7);
    /* 核心模糊效果，数值可按需调整（如3px、5px） */
    backdrop-filter: blur(5px);
    /* 确保遮罩层覆盖所有页面内容 */
    z-index: 999;
}

/* 加载动画样式（调整定位和层级） */
.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    /* 改为fixed定位，配合全屏遮罩 */
    position: fixed;
    /* 精准居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 层级高于遮罩层，确保动画不被遮挡 */
    z-index: 1000;
}

/* 旋转动画（补充原代码缺失部分） */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

关键说明 #

• backdrop-filter: blur(5px)：实现页面内容的模糊效果，数值越大模糊程度越高。
• 遮罩层使用fixed定位，确保覆盖整个浏览器视口，不会随页面滚动偏移。
• 通过z-index层级控制，遮罩层（999）低于加载动画（1000），保证动画清晰显示在模糊页面之上。
• 如果页面中有其他高z-index元素（如模态框），可适当提高遮罩层和动画的z-index值，确保覆盖效果正常。

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