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

html5 • • 问答

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

例如，让这些是我的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;
}
<!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>
        <div>
            <h1>My Test Text!</h1>
        </div>
    </div>
</body>
</html>

回答

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

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

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

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

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

  • I don't think so. As I said, the computer doesn't know what settings you have on your monitor. There was an attempt from Firefox, but the feature got removed completely. [See MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen/mozBrightness)
以上是根据屏幕亮度更改背景的alpha值的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容