CSS设置html全局2.5%margin后如何实现全屏背景图片？

html作为根元素设置2.5%全局外边距后，所有文档流内的子元素都会被限制在html的内部渲染区域内，因此.second-section的默认宽度仅为视口宽度减去左右各2.5%的margin，背景自然无法铺满全屏。

方案1：负边距抵消全局margin（最推荐，无需修改原有全局布局） #

直接给.second-section添加和html margin等值的负边距，抵消全局外边距的限制，若需要保留内部内容不贴边，可同步添加等值内边距：

.second-section{
    background: url(resources/img/Header/out-bg.png);
    background-size: cover;
    /* 抵消左右全局margin，如需上下也铺满可同步添加上下负margin */
    margin-left: -2.5%;
    margin-right: -2.5%;
    /* 可选：给内部内容加回边距，避免内容紧贴视口边缘 */
    padding: 0 2.5%;
    box-sizing: border-box;
}

方案2：使用视口单位+定位实现全屏 #

如果该section需要完全脱离原有文档流铺满整个视口，可使用绝对定位结合视口单位实现：

.second-section{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    background: url(resources/img/Header/out-bg.png);
    background-size: cover;
    /* 如出现层级遮挡可调整z-index值，数值越大层级越高 */
    z-index: 1;
}

如果使用该方案时出现横向滚动条，可给body添加overflow-x: hidden属性解决。

方案3：调整全局样式实现逻辑 #

如果后续有多个需要全屏的元素，可将全局边距的实现从html的margin改为body的padding，后续全屏元素统一加负边距抵消即可，维护成本更低：

/* 修改原有全局样式 */
html{
    margin: 0;
}
body{
    margin: 0;
    padding: 2.5%;
}

调整后.second-section的写法和方案1一致即可。

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