IOS系统固定背景图片异常问题求助（附CSS代码）

iOS Safari 对 background-attachment: fixed 的实现存在兼容性问题，会导致背景图显示变形、不全，以下是两种适配方案：

方案一：媒体查询针对性替换属性 #

通过检测iOS设备的WebKit特性，替换背景附着方式，保留桌面/Android端的原有效果：

#content {
    background-image: url("https://bluemountain-pools.com/wp-content/uploads/2024/06/hot-tub-smaller.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* 适配iOS设备 */
@supports (-webkit-touch-callout: none) {
    #content {
        background-attachment: scroll;
        min-height: 100vh; /* 可选：让背景图覆盖视口高度 */
    }
}

方案二：伪元素替代实现固定背景 #

用固定定位的伪元素模拟背景，避开原生background-attachment: fixed的兼容问题：

#content {
    position: relative;
    z-index: 1; /* 确保内容层级高于背景伪元素 */
    min-height: 100vh; /* 根据页面需求调整高度 */
}

#content::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://bluemountain-pools.com/wp-content/uploads/2024/06/hot-tub-smaller.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1; /* 将伪元素置于内容下方 */
}

注意事项 #

• 方案一的scroll属性会让背景随元素滚动，如果需要完全固定的视觉效果，优先选方案二
• 调整时注意测试不同iOS版本的表现，确保内容不会被背景遮挡

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