我想根据用户的屏幕亮度更改背景图像的亮度。让我用一个简单的例子演示一下。
例如，让这些成为我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 class="hero">
<div class="content">
<h1>My Test Text!</h1>
</div>
</div>
</body>
</html>仅当用户的屏幕亮度较低时，结果才是好的。当增加屏幕亮度时，前景不会从背景中脱颖而出。取而代之的是，对于明亮的屏幕来说alpha，“0.75好”的值看起来不错。
那么，有什么方法可以alpha根据用户的屏幕亮度来更改背景值吗？任何帮助，将不胜感激。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句