如何在某些事件（例如页面离线时）使特定网页变灰？答案

【问题标题】：How to make A particular Web Page Grey on certain events like when the page is offline?如何在某些事件（例如页面离线时）使特定网页变灰？
【发布时间】：2017-05-12 06:32:08
【问题描述】：

这是移动设备上@987654321@ 的离线版本，它使用渐进式网络应用程序并在用户离线时将内容显示为灰色。

这是一个没有变灰的在线版本

那么他们是怎么做到的呢？

【问题讨论】：

你可以创建一个灰色/灰色的叠加层，你很好（全部使用带有 javascript 激活的 css）
@mnemosdev 相应页面中项目的颜色也会调整吗？
是的，您可以使用 z-index css 属性在它们“前面”放置一层颜色，因此所有颜色都将使用您指定的颜色进行着色，就像这样，但没有菜单： codepen.io/mnemosdev/full/bWvygd

标签： css html twitter-bootstrap progressive-web-apps

【解决方案1】：

正如其他人所提到的，您可以在整个 HTML 上方使用 position: fixed 放置的叠加层。但是，这将不允许用户单击覆盖下方的任何元素，因此这取决于您所追求的。

对于 Flipkart，他们将以下 CSS 应用于 <html> 标签：

filter: grayscale(1);

它们还将内联样式应用于单个元素，例如用于修改其颜色的按钮。这种方法仍然允许您浏览网站，如果您允许离线功能，这将派上用场。

最后，您需要在 JavaScript 中添加事件侦听器来处理用户在线或离线时，如下所示。

window.addEventListener('online', function(e) {
    // add your logic to update the UI when online
    console.log("You are online");
    document.body.style.filter = 'grayscale(0)';
}, false);

window.addEventListener('offline', function(e) {
    // add your logic to update the UI when offline
    console.log("You are offline");
    document.body.style.filter = 'grayscale(1)';
}, false);

【讨论】：

因为在线/离线事件仅在没有网络连接时触发，所以您不会捕捉到所有这些谎言场景。对于那些你会想要在你访问网络的 fetch 事件逻辑中添加一些“花哨”逻辑的人。将 catch 处理程序添加到承诺更改和 postMessage 到客户端。在那里，您可以添加类或内联样式以对 UI 进行灰度化。