如何使网页的显示变暗[关闭]答案

【问题标题】：How to dim display of a webpage [closed]如何使网页的显示变暗[关闭]
【发布时间】：2021-03-07 03:25:35
【问题描述】：

我目前正在开发 chrome 扩展程序，并希望在现有网站（如 facebook、youtube 等）上调暗显示/添加黑色透明背景。这将如何在 CSS 中完成并在 JavaScript 中实现？

【问题讨论】：

问题：这个扩展是供你个人使用的，还是你真的想为公众创建一个扩展？如果更多的是供个人使用，那么您应该查看 TamperMonkey - 有关信息，请参阅 this answer。

【解决方案1】：

您可以在 CSS 中执行此操作，而不是在 javascript 中。

总体情况是，您将创建一个样式如下的 div：

<div id="overlay"></div>
<style>
    #overlay{z-index:9999999;pointer-events:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);}
</style>

这将创建一个位于页面内容顶部的 div，并使整个页面更加暗淡。（请注意，您的叠加层的 z-index 值必须设置为高于页面上每个其他元素的 z-index 值。每个页面都不同。默认情况下，每个元素的 z-index 为零 -但大多数网站将某些项目置于其他项目之上，因此使用率最高的 z-index 几乎可以是任何项目。）

请注意，rgba() 末尾的“a”是不透明度值 - 0.3 的值将允许下面的大部分内容可见，但由前三个值 0,0,0 着色，这是黑色的。

您将如何仅使用 javascript 来做到这一点？这是一个简短的视频，解释了如何创建 html 并使用 javascript 将其添加到页面中：

https://www.youtube.com/watch?v=VsXCK_2DJzA

只有一个问题：（已解决）

由于您的叠加 div 位于页面内容的顶部，用户无法再与页面内容交互（无法点击字段、无法按下按钮等）。由于 z-index（这是将叠加层放置在其他页面内容之上所必需的），叠加层现在位于鼠标光标和页面内容之间。用户点击的任何地方，他们都在点击叠加层。

David Bailey 在 cmets 中向我指出的解决方案是在覆盖 div 上使用 css 属性 pointer-events: none;。这告诉 CSS 忽略对该元素（叠加层）的任何点击，并将它们传递给底层组件。

/*  Note: this is NOT jQuery - look carefully.  */
const $ = document.querySelector.bind(document);
$('#mybutt').addEventListener("click", function() {
   alert("You clicked me");
});
$('#mybutt2').addEventListener("click", function() {
   $('#mybutt2').innerText = 'Try clicking buttons NOW';
   $('#olay').classList.add("noPtrEvts");
});

#olay{
  pointer-events: none;
  z-index:9999999;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.3);
}
.noPtrEvts{
  pointer-events: auto !important;
}

<div id="olay"></div>
<h1>An Example Webpage</h1>
<div><img src="http://placekitten.com/300/150" /></div>
<button id="mybutt">Click me First</button>
<button id="mybutt2">Remove pointer-events CSS</button>

【讨论】：

使用pointer-events: none 允许鼠标事件通过元素:)
谢谢大卫 - 我还没有听说过这个属性。现在检查...
@DavidBailey 你是绝对正确的，大卫。 谢谢！

【解决方案2】：

仅在 JavaScript 中无法做到这一点，除非您引入 CSS 脚本，因为这仍然是，我已经编辑了您帖子的标签以引入正确的专家来提供帮助。

你会这样做：


body{
background-color: #302E2E;
}

在 CSS 中，但您可能需要查看元素类和 Id 以使其在所有平台上通用

【讨论】：