CSS change background’s alpha value based on screen brightness

I want to change the brightness of my background image based on the user's screen brightness. Let me demonstrate this with a simple example.

For example, let these be my html and css files:

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

.hero{
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('https://cdn.decorilla.com/online-decorating/wp-content/uploads/2018/10/modern-interior-design-grey-living-room2.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content{
    width: 50%;
}

.content h1{
    color: #fff;
    text-align: center;
    font-size: 2rem;
}
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hero">
        <div class="content">
            <h1>My Test Text!</h1>
        </div>
    </div>
</body>
</html>

The result is good only when the user's screen brightness is low. When the screen brightness is increased, the foreground does not stand out from the background. Instead, An alpha value of 0.75 looks good for bright screens.

So is there any way to change the alpha value of the background based on the user's screen brightness? Any help would be appreciated.



Read more here: https://stackoverflow.com/questions/66273128/css-change-backgrounds-alpha-value-based-on-screen-brightness

Content Attribution

This content was originally published by Sushil at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: