求助：实现页面滚动时背景逐渐变浅的CSS方案

问题说明 #

已创建带固定背景的页面，期望向下滚动时背景逐渐变浅，但当前代码仅实现了顶部深色、底部浅色的静态渐变，无滚动时的动态过渡效果，需要实现滚动过程中背景从深到浅的动态变化。

解决方案 #

要实现这种效果，我们需要通过JavaScript监听滚动事件，动态调整背景遮罩层的透明度，结合固定背景图来达成滚动时的渐变效果。以下是修改后的完整代码：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>SkyLine</title>
</head>
<body>
    <!-- 背景遮罩层，用于动态调整深浅 -->
    <div class="background-overlay"></div>
    
    <div class="content">
        <div class="navbar">
            <a href="#">Home</a>
        </div>
        <div class="navbar">
            <a href="#">Contact Us</a>
        </div>
        <div class="navbar">
            <a href="#">About Us</a>
        </div>
        <div class="paras">
            <!-- 增加更多文本让页面可滚动 -->
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
        </div>
        <div class="message">
            Send a message
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

修改后的CSS代码 #

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
/* 仅保留背景图，移除静态渐变 */
background-image: url(https://plus.unsplash.com/premium_photo-1673491310188-f14100075189?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80);
background-attachment: fixed;
background-size: cover;
background-position: center;
}

/* 背景遮罩层：固定定位覆盖整个视口，初始深色 */
.background-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 1);
opacity: 0.5; /* 初始透明度，对应顶部深色 */
pointer-events: none; /* 不干扰页面交互 */
transition: opacity 0.1s ease; /* 平滑过渡 */
}

.content {
padding: 10px;
position: relative;
z-index: 1; /* 确保内容在遮罩层上方 */
}

.navbar {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
top: 0;
border-radius: 10px;
z-index: 2; /* 导航栏在最上层 */
}

.paras {
margin: 20px;
color: white; /* 文本设为白色，方便深色背景下阅读 */
font-size: 1.2rem;
line-height: 1.6;
}

.message {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
bottom: 0;
border-radius: 10px;
z-index: 2;
}

JavaScript代码（新建script.js文件） #

// 监听滚动事件
window.addEventListener('scroll', function() {
    // 计算滚动进度：已滚动距离 / (页面总高度 - 视口高度)
    const scrollProgress = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
    
    // 计算遮罩透明度：初始0.5，随着滚动逐渐降低到0（完全透明）
    // 可根据需求调整最终透明度值，比如改成0.1保留轻微深色
    const overlayOpacity = 0.5 - (scrollProgress * 0.5);
    
    // 更新遮罩层的透明度
    document.querySelector('.background-overlay').style.opacity = overlayOpacity;
});

效果说明 #

• 页面初始状态（顶部）：遮罩层透明度为0.5，背景呈现深色效果
• 向下滚动时：随着滚动距离增加，遮罩层透明度逐渐降低，背景逐渐变浅
• 滚动到底部时：遮罩层透明度变为0，背景完全显示原图亮度

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