如何用CSS实现左侧菜单下方的向左全屏背景效果？

针对你的需求，现有代码中background-size失效的核心原因是：你设置的width:100vw让元素宽度等于视口宽度，此时background-size:30%是基于这个100vw宽的元素计算的，并非你预期的“覆盖菜单+延伸全屏”的范围。以下是两种实用的实现方案：

方案一：伪元素实现独立全屏左侧背景（推荐） #

这种方式不干扰原元素布局，用伪元素单独承载背景，精准控制覆盖范围：

.currentpage-category {
    main {
        padding: 0;
    }

    #categoryWithSidemenu{
        position: relative; /* 为伪元素提供定位基准 */
        /* 移除原有的width、margin-left，保持正常布局流 */
        .categoryContainer {
            width: 100%;
            padding: 20px 0 200px 0;
            margin-right: auto;
            margin-left: auto;
            max-width: 1426px;
            position: relative; /* 确保内容层级高于背景伪元素 */
            z-index: 1;
        }
    }

    /* 新增伪元素，实现全屏左侧背景 */
    #categoryWithSidemenu::before {
        content: '';
        position: absolute;
        top: 0;
        height: 100%;
        z-index: 0;
        /* 计算背景宽度：视口左侧空白区域 + 菜单宽度（此处30%为示例，替换为你菜单的实际占比/固定宽度） */
        width: calc((100vw - 100%) / 2 + 30%);
        /* 让背景从视口最左侧开始 */
        margin-left: calc(-1 * (100vw - 100%) / 2);
        background: linear-gradient(163deg, rgba(31,57,87,1) 0%, rgba(94,106,120,1) 100%);
    }

    #categoryWithoutSidemenu {
        padding: 100px 15px 120px;
    }
}

方案二：直接调整背景尺寸与定位 #

如果你想保留原元素的背景设置，可修改background-size为基于视口的计算值：

.currentpage-category {
    main {
        padding: 0;
    }

    #categoryWithSidemenu{
        background: linear-gradient(163deg, rgba(31,57,87,1) 0%, rgba(94,106,120,1) 100%); 
        /* 背景宽度=视口左侧空白 + 菜单宽度（30%为示例，替换为实际值） */
        background-size: calc((100vw - 100%) / 2 + 30%) 100%;
        background-repeat: no-repeat;
        background-position: left center; /* 背景左对齐，从视口边缘开始 */
        width: 100vw;
        margin-left: calc((100% - 100vw) / 2);  
        .categoryContainer {
            width: 100%;
            padding: 20px 0 200px 0;
            margin-right: auto;
            margin-left: auto;
            max-width: 1426px;
        }
    }

    #categoryWithoutSidemenu {
        padding: 100px 15px 120px;
    }
}

关键说明 #

• calc((100vw - 100%) / 2)用于计算容器与视口之间的左侧空白宽度（当容器有max-width时生效）。
• 请将代码中的30%替换为你左侧菜单的实际宽度占比（如固定宽度可直接写250px），确保背景精准覆盖菜单区域。

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