如何仅修改CSS让蓝色网格背景从header区块下方开始显示

无需修改HTML结构，仅调整#page容器的背景属性即可实现需求，核心思路是在原有网格背景上层叠加一个与header等高的纯白色遮罩层，盖住容器顶部的网格区域。
修改后的完整CSS代码如下：

#page {
    background-image: 
        /* 顶部200px高的白色遮罩，高度与header保持一致 */
        linear-gradient(#ffffff 0, #ffffff 200px, transparent 200px),
        /* 原有网格渐变保留 */
        linear-gradient(rgba(74, 131, 167, .20) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(74, 131, 167, .20) 1px, transparent 1px);
    /* 第一个值对应白色遮罩铺满容器，后两个值对应原网格尺寸 */
    background-size: 100% 100%, 10px 10px, 10px 20px;
    height: 800px; 
    width: 100%;
}
#header {
    background-color: #FFF !important;
    height: 200px;
    width: 50%;
    margin: 0 auto;
}

实现原理 #

• CSS多层背景遵循先定义的层级在上的渲染规则，最上层的白色渐变仅在容器0-200px高度区间显示纯白色，200px以下为完全透明状态，刚好遮挡住该区间内的网格图案
• 白色遮罩与#header的背景色完全一致，header居中布局时，左右两侧露出的容器顶部区域也会显示为白色，和header视觉上完全衔接无断层
• 原有网格的渲染逻辑未做改动，仅顶部200px区域被遮挡，视觉效果等价于网格从header下边缘开始渲染
• 后续如果调整header高度，只需同步修改白色渐变的200px截断值即可适配

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