移动端如何实现background-attachment: fixed与background-size: cover效果？

问题说明 #

桌面浏览器中，通过background-attachment: fixed + background-size: cover设置的背景可正常铺满页面且滚动时保持固定，但在iPhone的Safari和Chrome浏览器中，背景图出现放大/截断，且滚动页面时背景会随之滚动，无法固定。

原CSS代码：

body {
    background-image: url("../files/images/darkBackground.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

已尝试方案：单独用div设置固定背景、为小屏设备制作1:1比例背景图，均未解决问题。

解决方案 #

移动端Safari对background-attachment: fixed的支持存在兼容性缺陷，推荐以下两种替代方案：

方案1：伪元素+固定定位模拟固定背景 #

兼容性更强，可完美模拟固定背景效果：

body {
    position: relative;
    /* 移除原body上的背景相关属性 */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("../files/images/darkBackground.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1; /* 将背景置于内容下方 */
}

原理：用占满视口的固定定位伪元素作为背景层，滚动页面时伪元素不会跟随移动，实现固定背景的视觉效果。

方案2：移动端降级为滚动背景 #

若无需严格固定效果，可针对移动端调整样式避免异常：

body {
    background-image: url("../files/images/darkBackground.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* 针对iOS设备的媒体查询 */
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
    body {
        background-attachment: scroll; /* 移动端改用滚动背景 */
        background-size: auto 100%; /* 保证背景完整显示 */
    }
}

注意事项 #

• 伪元素方案中，需确保页面内容的z-index不低于-1，避免被背景遮挡。
• 若背景图适配仍有问题，建议准备9:16比例（手机常见竖屏比例）的移动端专用背景图，减少cover属性导致的截断。

内容的提问来源于stack exchange，提问作者Patrik Bartók