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

【问题标题】：Change background's alpha value based on screen brightness根据屏幕亮度更改背景的 alpha 值
【发布时间】：2021-05-22 04:22:41
【问题描述】：

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

例如，让这些成为我的 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>

只有当用户的屏幕亮度较低时效果才好。当屏幕亮度增加时，前景不会从背景中脱颖而出。相反，0.75 的 alpha 值看起来适合明亮的屏幕。

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

【问题讨论】：

颜色确实会根据亮度变亮。你的意思是基于背景的亮度？
@Mr_Green 我希望根据屏幕的亮度调整背景的不透明度（亮度越高，alpha 值越高）。不幸的是，到目前为止我得到的答案表明这是不可能的。
每种颜色都会根据亮度自动设置。如果您正在对其进行更改，那么这对一般用户可访问性不利。无论如何，如果您想进行更改，则无法通过这些技术来完成，而必须是更核心的技术，例如 .Net for windows（桌面应用程序）。不过我不建议这样做。

标签： javascript html css

【解决方案1】：

没有用于检测亮度的媒体查询。 See all media-queries

也没有 JS 方法可以做到这一点。 See another question

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

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

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

【讨论】：

好的...我们可以期待js 将来添加查找屏幕亮度的功能;)
我不这么认为。正如我所说，计算机不知道您的显示器上有哪些设置。 Firefox 曾尝试过，但该功能已被完全删除。 See MDN
好的，谢谢！ text-shadow 这件事很有帮助。

【解决方案2】：

关于为什么 JavaScript 不可能实现，还有另一个很好的答案。同时，我认为一些额外的信息可能会有所帮助。

如果您可以将应用程序安装到客户端，例如 node.js 应用程序，您可以达到某种屏幕亮度并通过 API 公开该值，并从您的 JavaScript 代码中获取该值。

检测亮度将是另一个问题，但这可能是一个好的开始。

这会很棘手，因为解决方案会有所不同，具体取决于您的目标操作系统、是否是外接显示器等。例如，WmiMonitorBrightness 可能对 Windows 系统有用。

【讨论】：

【解决方案3】：

有filter属性brightness方法可以让你根据屏幕亮度相对变化。从技术上讲，亮度仍会根据屏幕的变化而变化，但它使我们可以利用恒定值来增加或减少。

filter: brightness(1.5) (MDN)

【讨论】：

brightness 是一个不错的选择，但它会影响div 的孩子的不透明度，这不是我想要的:(
在这种情况下，有一个单独的 div（一个浮动元素 - 位置：绝对，z-index：-1）仅用于显示背景。
@Sushil 无论如何，我觉得text-shadow 是最好的方法，正如另一个答案所述。
连我都觉得text-shadow比filter: brightness()好。但无论如何，谢谢你的帮助！

【解决方案4】：

浏览器不知道监视器信息和设置。这不太可能但是你可以试试这个：

#:before{content:'';/*backgroundcodes*/opacity:.15}

【讨论】：