如何实现页面滚动时背景图固定效果（弃用background-attachment:fixed）

由于background-attachment: fixed在iOS及部分移动端浏览器存在兼容性问题，可通过以下两种方案实现相同的滚动固定背景效果：

方案一：独立固定背景层（推荐） #

将背景图放在独立的position: fixed元素中作为底层，内容容器置于上方，通过层级控制实现效果，完全避开background-attachment: fixed的兼容性问题。

代码实现 #

HTML结构

<div class="fixed-background"></div>
<div class="wrapper" id="wrapper">
    <div id="creativity" style="position: relative; width: 300px; height: 600px; overflow: hidden;">
        <a href="https://www.google.com" target="_blank" id="frameLink" style="display: block; position: absolute; top: 0; left: 0; width: 300px; height: 600px; cursor: pointer;">
            <img src="images/marco.png" alt="Marco" id="frameImage" style="width: 100%; height: 100%;">
        </a>
    </div>  
</div>

CSS样式

.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/fondo.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1; /* 确保背景在内容下方 */
}

.wrapper {
    position: relative;
    z-index: 1; /* 确保内容层级高于背景 */
}

优势：兼容性覆盖所有支持position: fixed的浏览器（包括iOS），逻辑简单易维护，性能无损耗。

方案二：伪元素+滚动监听（局部背景场景） #

如果背景仅需在#creativity容器内显示，可通过容器伪元素承载背景，监听页面滚动事件动态调整伪元素位置，模拟固定效果。

代码实现 #

HTML结构

<div class="wrapper" id="wrapper">
    <div id="creativity" style="position: relative; width: 300px; height: 600px; overflow: hidden;">
        <a href="https://www.google.com" target="_blank" id="frameLink" style="display: block; position: absolute; top: 0; left: 0; width: 300px; height: 600px; cursor: pointer;">
            <img src="images/marco.png" alt="Marco" id="frameImage" style="width: 100%; height: 100%;">
        </a>
    </div>  
</div>

CSS样式

#creativity {
    position: relative;
    width: 300px;
    height: 600px;
    overflow: hidden;
}

#creativity::before {
    content: '';
    position: absolute;
    top: var(--scroll-offset, 0);
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/fondo.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

JavaScript（含节流优化）

// 节流函数优化滚动事件性能
function throttle(func, delay) {
    let timer = null;
    return function() {
        const context = this;
        const args = arguments;
        if (!timer) {
            timer = setTimeout(() => {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}

// 监听滚动调整伪元素位置
window.addEventListener('scroll', throttle(() => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    document.getElementById('creativity').style.setProperty('--scroll-offset', `-${scrollTop}px`);
}, 16)); // 匹配60fps刷新间隔

适用场景：仅需在特定容器内显示固定背景的场景，需注意滚动事件的性能优化。

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