如何解决紫色Header与白色Main间对角线模糊及背景图残留问题

核心问题分析 #

1. 对角线像素化：原渐变未明确设置颜色突变位置，浏览器自动插值产生过渡模糊。
2. 背景图穿透白色区域：背景图与渐变叠加时默认覆盖整个元素，未被限制在紫色区域内。

修复后的代码实现 #

CSS 代码

#circle {
    background: linear-gradient(175deg, rgba(104,108,208,1) 80%, white 80%);
    height: 640px;
    position: relative;
}

#circle::before {
    content: "";
    position: absolute;
    inset: 0; /* 等同于top/right/bottom/left: 0 */
    background: url("../media/circles.png");
    /* 使用渐变蒙版限制背景图仅显示在紫色区域 */
    -webkit-mask-image: linear-gradient(175deg, black 80%, transparent 80%);
    mask-image: linear-gradient(175deg, black 80%, transparent 80%);
    pointer-events: none; /* 避免干扰元素内的交互事件 */
}

HTML 结构保持不变

<header>
    <div id="circle">
        ...
    </div>
</header>

关键修改说明 #

1. 清晰对角线实现：将渐变中white的起始位置设为80%，与紫色的结束位置完全一致，让颜色直接突变，消除过渡模糊。
2. 背景图区域限制：通过伪元素承载背景图，再用mask-image以相同渐变路径裁剪背景图，使圆形图案仅在紫色区域显示，白色区域完全隐藏背景图。

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