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

Question

这是移动设备上 https://www.flipkart.com/ 的离线版本，它使用渐进式 Web 应用程序并在用户离线时将内容灰显。

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

他们是怎么做到的？

Answer 1

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

对于 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);

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

How to make A particular Web Page Grey on certain events like when the page is offline?

html

css

twitter-bootstrap

progressive-web-apps