根据屏幕亮度更改背景的 alpha 值

Question

根据屏幕亮度更改背景的 alpha 值

我想根据用户的屏幕亮度更改背景图像的亮度。让我用一个简单的例子来证明这一点。

例如，让这些是我的html和css文件：

*{
    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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

只有当用户的屏幕亮度较低时，效果才好。当屏幕亮度增加时，前景不会从背景中突出。相反，对于明亮的屏幕，Analpha值0.75看起来不错。

那么有没有什么办法可以alpha根据用户的屏幕亮度来改变背景的值呢？任何帮助，将不胜感激。

Answer 1

And*_*ovs 5

没有用于检测亮度的媒体查询。查看所有媒体查询

也没有 JS 方法可以做到这一点。看另一个问题

这对我来说没有意义，如果我改变显示器的亮度，PC 并不知道。因此你无法做到这一点。

您至少可以使用媒体查询在深色和浅色主题之间切换，但这不是您想要实现的，我认为。

对于文本，您可以尝试添加text-shadow. 这可能有助于更好地查看文本。

我不这么认为。正如我所说，计算机不知道您的显示器上有哪些设置。Firefox 曾尝试过，但该功能被完全删除。[参见 MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen/mozBrightness) (2认同)

归档时间：	4 年，11 月前
查看次数：	98 次
最近记录：	4 年，11 月前