视差滚动失效求助：如何让蓝色背景固定实现滚动覆盖

嘿，我来帮你搞定这个视差滚动的问题～先说说你原来代码的核心问题：你把background-attachment: fixed加在了#mainpage这个div上，但这个div只占初始视口的100%高度。当你滚动页面时，#subpage会从下方滑上来，而#mainpage本身会被移出视口，它的背景自然也跟着走了，所以看起来fixed完全没起作用。

下面给你两种可行的解决方案：

方案一：把固定背景移到body上 #

这种方法最简单直接，把蓝色背景设置在body上，让#mainpage透明，这样背景就会一直固定在视口，#subpage的白色区域会在上面滚动。

修改后的完整代码：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>trrtr</title> 
    <style>
        @charset "UTF-8"; 
        * { box-sizing: border-box; } 
        body, html { 
            margin: 0; 
            font-family: 'Overpass', sans-serif; 
            height: 100%; 
            background-color: #83b2d9; 
            background-attachment: fixed; 
            background-size: cover; 
        } 
        #mainpage { 
            width: 100%; 
            height: 100%; 
            /* 移除原来的背景，让body的背景透出来 */
        } 
        #subpage { 
            width: 100%; 
            background-color: white; 
            padding: 2rem; /* 给内容加个内边距，看起来更舒服 */
        }
    </style>
</head> 
<body> 
    <div id="mainpage"> 
        <!-- 这里可以放mainpage的内容 -->
    </div> 
    <div id="subpage"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus similique iure fuga, repellendus quaerat nobis illo libero! Consequatur perspiciatis cupiditate cum culpa ut impedit earum ullam velit hic. Illum, ullam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore molestias totam voluptatum, deleniti culpa unde, reiciendis similique ab esse fuga minima aspernatur eius! Ad, rem et deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio facilis, consectetur iusto quas quaerat impedit minima aliquid quis quibusdam laudantium illo totam sint eaque atque culpa optio perferendis magnam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius! Sapiente tempora quia, ullam deleniti, ea consectetur, sequi amet numquam accusamus ex hic praesentium, enim corporis similique ut. Repudiandae, delectus!officia facere!</p> 
    </div> 
</body> 
</html>

方案二：用伪元素创建固定背景层 #

如果#mainpage需要有自己的背景或样式，不想把蓝色背景放在body上，可以用body的伪元素来创建一个固定在视口的背景层，把它放在所有内容下方。

修改后的CSS部分：

@charset "UTF-8"; 
* { box-sizing: border-box; } 
body, html { 
    margin: 0; 
    font-family: 'Overpass', sans-serif; 
    height: 100%;
} 
/* 用伪元素创建固定背景 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #83b2d9;
    z-index: -1; /* 确保背景在所有内容下面 */
}
#mainpage { 
    width: 100%; 
    height: 100%; 
    /* 这里可以设置mainpage的样式，比如添加内容、半透明背景等 */
} 
#subpage { 
    width: 100%; 
    background-color: white;
    padding: 2rem;
}

为什么原来的代码失效？ #

background-attachment: fixed的作用是让背景相对于浏览器视口固定，但它是绑定在#mainpage这个元素上的。当你滚动页面时，#mainpage会被滚出视口，它的背景自然也跟着离开了视口范围，所以你看不到固定效果。而上面两种方法都是让蓝色背景直接绑定在视口（或视口级别的容器）上，不管页面怎么滚动，背景都会一直留在视口里，这样#subpage的白色区域就能在它上面滚动啦～

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