css code to lighten the page as the page is scrolled down-CodePudding

I have created a sample page with a fixed background. I want the page to lighten up as the page is scrolled down.

<!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 >
        <div >
            <a href="#">Home</a>
        </div>
        <div >
            <a href="#">Contact Us</a>
        </div>
        <div >
            <a href="#">About Us</a>
        </div>
        <div >
            <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 >
            Send a message
        </div>
    </div>

</body>
</html>

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

body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)), 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;
}

.content {
padding: 10px;
}

.navbar {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
top: 0;
border-radius: 10px;
}

.paras {
margin: 20px;
}

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

Instead, in my current code, the top of the screen is dark and the bottom is light. It doesn't get lighter as the page is scrolled down.

I want to achieve this effect: https://www.wix.com/website-template/view/html/1896?originUrl=https://www.wix.com/website/templates&tpClick=view_button&esi=c5ca042c-26c4-41cb-bc5f-01e47031976d

CodePudding user response：

Your mistake is that you did a gradient from black to white, while you actually need a gradient from fully transparent white to almost opaque white to lighten your content. In the snippet below, I changed the body linear-gradient to achieve the expected result :

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

body {
/*Removed linear gradient from this background-image or else the gradient wouldn't 'lighten' the content on scroll */
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;
}

.content {
/* Added linear-gradient */
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8015405991498161) 40%, rgba(255,255,255,0.8) 100%);
padding: 10px;
}

.navbar {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
top: 0;
right: 10px;
border-radius: 10px;
}

.paras {
margin: 20px;
}

.message {
display: inline-block; /* Changed display property to avoid the element having full width */
background-color: white;
/* float: right; Removed so it doesn't break the content display */
padding: 10px;
margin: 10px;
position: sticky;
bottom: 0;
border-radius: 10px;
}

<!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 >
        <div >
            <a href="#">Home</a>
        </div>
        <div >
            <a href="#">Contact Us</a>
        </div>
        <div >
            <a href="#">About Us</a>
        </div>
        <div >
            <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 >
            Send a message
        </div>
    </div>

</body>
</html>