阅读模式下如何让整个网页变成淡黄色？ [复制]

Posted 2023-03-05

【中文标题】阅读模式下如何让整个网页变成淡黄色？ [复制]

【英文标题】：How to make whole web page pale yellow for reading mode? [duplicate]

【发布时间】：2020-12-18 03:40:12

【问题描述】：

我正在尝试向我的网站添加一项功能，用户可能会有一个切换按钮用于阅读模式。当点击该切换按钮时，整个页面将变为淡黄色颜色，从而减少从屏幕射出的紫外线，从而减少用户的眼睛疲劳，同时阅读。

为此，我使用这样的叠加层：

HTML：

<div id="overlay" class='visibility-hidden' style="position: fixed;width: 100%;height: 
100%;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(255, 210, 124, 0.21);z-index: 1;"></div>

<button class='read_mode'>Click here For Read mode</button>

CSS：

.visibility-hidden
  display:none;


.visibility-true
  display:block;

Javascript：

$('.read_mode').click(function()
alert("Now you can NOT click the button");
$("#overlay").removeClass("visibility-hidden").addClass("visibility-true");

);

这种方法的问题是网页上的按钮和其他元素无法再点击，因为<div>不可点击，因为这个淡黄色的<div>高于网页上的所有其他元素.

到 JSFiddle 的链接：https://jsfiddle.net/aeok8sbp/1/

谢谢

【参考方案1】：

将pointer-events: none; 添加到#overlay CSS。这样做，它将忽略触摸和点击事件。 this JSFiddle 上的示例（它不会切换，因为您尚未实现，但按钮会注册点击并显示警报）。