使用CSS ::before实现div上方半透明遮罩的问题求助

• 需求：实现全屏宽度的固定div，上方有等高半透明遮罩，滚动时下方内容可透过遮罩显示；必须用::before伪元素实现，不能额外添加div。
• 问题：现有CSS代码中，::before伪元素未呈现预期半透明效果，反而显示为.main-header的淡色；用transform调整位置效果不佳，需修改代码。

现有代码 #

第一段代码 #

.main-header {
    position: fixed;
    background-color: #006ab1;
    width:100%;
    height: 60px;
    transform:translateY(60px);

    &::before {
        content: "";
        bottom: 100%;
        height: 60px;
        background: #fff;
        opacity: 75%;
        display: block;
        transform:translateY(-60px);
    }
}

第二段代码 #

.main-header {
    position: fixed;
    background-color: #006ab1;
    width:100%;
height: 100px;

    &::before {
        content: "";
        bottom: 100%;
        height: 100px;
        background: #fff;
        opacity: 75%;
        display:block;
    }
}

问题核心是伪元素未正确脱离主元素文档流，导致被主元素背景覆盖。修改后的代码如下：

.main-header {
    position: fixed;
    background-color: #006ab1;
    width: 100%;
    height: 60px;
    /* 如需向下偏移，保留此行即可：transform: translateY(60px); */

    &::before {
        content: "";
        position: absolute; /* 关键：让伪元素绝对定位，相对于主元素布局 */
        bottom: 100%; /* 定位到主元素顶部的上方 */
        left: 0;
        width: 100%; /* 全屏宽度 */
        height: 100%; /* 与主元素等高，自动适配主元素高度 */
        background: rgba(255, 255, 255, 0.75); /* 直接设置半透明白色背景，比opacity更可控 */
        z-index: -1; /* 让伪元素在主元素下层，确保主元素背景不被遮挡，同时下方内容可透过遮罩显示 */
    }
}

关键修改点说明 #

1. position: absolute：让伪元素相对于fixed定位的.main-header进行定位，bottom:100%才能正确将其放在主元素正上方，而非挤在主元素内部。
2. width:100% + left:0：确保伪元素和主元素一样铺满全屏宽度。
3. height:100%：自动继承主元素高度，无需写固定数值，适配更灵活。
4. rgba背景替代opacity：效果一致但不会影响伪元素的子元素（虽此处无子女，但属于更规范的写法）。
5. z-index:-1：将伪元素置于主元素下层，主元素蓝色背景保持可见，滚动时页面内容会透过伪元素的半透明区域显示出来。

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