滚动时背景图渐隐且内容重叠的实现问题

我是一名前端初学者，使用Visual Studio Code进行开发，今年才开始学习编程，目前在完成学校作业：不使用审查元素复制粘贴的前提下复刻喜爱的网站。我想要实现：页面顶部的图片在滚动时逐渐淡出，同时页面正文内容在图片淡出过程中与之重叠。以下是我编写的代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proiect - Claudio Negrea</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background-image"></div>
    <div class="title">
        <h1><i class="title_text">SITE - PROIECTUL LA PCLP</i></h1>
    </div>
    <div class="content">
        <section>
            <h2>Jaguar E-Type</h2>
            <img src="1968-jaguar-e-type_1.jpg" alt="Jaguar E-Type">
            <p>The 1960s Jaguar E-Type, famously praised by Enzo Ferrari as "the most beautiful car ever made," remains a classic sports car icon. With its impressive performance—reaching speeds of up to 150 mph—and superior braking capabilities for its time, it continues to capture the hearts of enthusiasts. Experience the thrill firsthand at the Jaguar Heritage Driving Experience program in Kenilworth, U.K., where you can spend a day driving these timeless classics.</p>
        </section>
    </div>
    <footer>
            <h2>Contact Us</h2>
            <p>Email: Claudio@gmail.com</p>
            <p>Phone: 0719346413</p>
        <p>&copy; 2024 Your Company. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS代码 #

/* Reset and general styles */
body {
    font-family: 'Kumbh Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}

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

/* Background image */
.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('1954-mercedes-300sl-gullwing-a_1.jpg'); /* Replace 'your-background-image.jpg' with your image path */
    background-size: cover;
    background-position: center;
    opacity: 0.5; /* Set initial opacity */
    z-index: -1; /* Behind other content */
    transition: opacity 0.5s ease; /* Add transition effect */
}

/* Navigation design */
.title {
    background: rgb(31, 31, 31);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    margin-left: -10px; /* Adjust margin */
}

.title_text {
    background-color: rgb(137, 218, 15);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    cursor: default;
    text-decoration: none;
    text-align: center;
    font-size: 2rem;
}

/* Main content section */
.content {
    padding: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -500px; /* Adjust margin */
}

section {
    width: 100%;
    max-width: 1000px; /* Adjust the max-width as needed */
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Center items vertically */
}

section h2 {
    flex: 1 1 100%;
    font-size: 1.8rem; /* Increase font size */
    margin-bottom: 10px;
    text-align: center;
}

section img {
    width: 100%;
    max-width: 900px; /* Adjust the max-width as needed */
    margin: 0 auto; /* Center the image horizontally */
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

section p {
    flex: 1 1 100%;
    font-size: 1.2rem; /* Increase font size */
    color: #666;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}

/* Footer */
footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
    var background = document.querySelector('.background-image');

    // Listen for scroll event
    window.addEventListener('scroll', function() {
        // Calculate opacity based on scroll position
        var opacity = 0.5 - (window.scrollY / window.innerHeight);

        // Set opacity to the background image
        background.style.opacity = opacity > 0 ? opacity : 0;
    });
});

实现目标效果的修改方案 #

1. 修正背景图淡出逻辑
   原JS的透明度计算起点低，淡出过快，调整为从完全不透明开始，滚动距离覆盖整个视口高度时完全淡出：

document.addEventListener('DOMContentLoaded', function() {
    const background = document.querySelector('.background-image');

    window.addEventListener('scroll', function() {
        const scrollRatio = window.scrollY / window.innerHeight;
        // 滚动距离未超过视口高度时，透明度从1线性降到0；超过后保持完全透明
        const opacity = scrollRatio > 1 ? 0 : 1 - scrollRatio;
        background.style.opacity = opacity;
    });
});

2. 修复内容偏移，实现重叠效果
   删掉.content的margin-left: -500px和.title的margin-left: -10px，避免内容偏移；给section添加半透明背景，保证文字在背景图上的可读性：

/* Navigation design */
.title {
    background: rgb(31, 31, 31);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    /* 移除margin-left: -10px */
}

/* Main content section */
.content {
    padding: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 移除margin-left: -500px */
}

section {
    width: 100%;
    max-width: 1000px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    padding: 20px;
    border-radius: 8px;
}

3. 调整背景图初始状态
   把.background-image的初始opacity改为1，配合JS的淡出逻辑：

/* Background image */
.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('1954-mercedes-300sl-gullwing-a_1.jpg');
    background-size: cover;
    background-position: center;
    opacity: 1; /* 初始完全不透明 */
    z-index: -1;
    transition: opacity 0.3s ease; /* 缩短过渡时间，让动画更流畅跟手 */
}

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