☰

CSS 定位 Chrome 在加载时瞬间显示的白色页面

tag-icon • tag-icon google-chrome colors css
CSS 定位 Chrome 在加载时瞬间显示的白色页面

当您在 Chrome 中点击链接从第 x 页转到第 y 页时，一瞬间它会显示一个空白页面。我想将该页面设为黑色，这样就不会伤害我的眼睛。

现在，我是这个问题的应届毕业生：

破解 Chrome 以黑色背景显示其内部页面

正如接受的答案所暗示的，我已经定制了我的C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css文件。

事实证明这个文件是能够瞄准瞬间加载的页面！耶！我能够通过放入一个简单的 来使该页面html {background: black}变黑Custom.css。

问题是...该Custom.css文件应用于全部网页。这意味着现在我在所有页面上都看到黑色背景，这是我不想要！（因为我已经有一个可以翻转颜色的扩展，黑色翻转后就变成白色了。）

我的问题是：我如何在Custom.css目标中编写 CSS仅有的Chrome 在加载网页时会瞬间显示白页？

答案1

为了回答手头的问题，我认为不可能仅通过 CSS 来定位页面（或页面的这种状态）。

我创建了一个快速的 Chrome 扩展程序，使每个页面背景在页面加载之前都变为黑色。

您可以在GitHub和Chrome 网上应用店。

请注意，我只是为了这个特定问题而编写的，并没有进行广泛的测试。我已经注意到 Google 搜索中存在一个问题。我使用 Google Instant，似乎window.onload扩展所依赖的事件从未触发过。现在它在 0.2 版中应该可以相当可靠地运行。

请随时在 GitHub 上报告错误，我可能会修复它们。

答案2

我确信这不可能。您一瞬间看到的“页面”实际上并不是一个单独的页面，而只是正在下载的未构造页面。解决这个问题的唯一方法是让您访问的所有页面都明确指定一个背景，然后覆盖 Custom.css 中的背景。

我能想到的解决这个问题的唯一方法是在加载页面时运行一些 JavaScript（使用诸如greasemonkey 之类的程序）来删除不需要的黑色背景。

编辑：实际上，经过一番思考后，这可能会满足您的要求（可能只需稍加调整）

html {
    -webkit-animation: fadebackground 1s linear 0 1;
}

@-webkit-keyframes fadebackground {
    0% {
        background: black;
    }
    100% {
        background: none;
    }
}

一开始背景是黑色的，一秒钟后背景会逐渐消失。你可以在这里找到一个非常详细的 -webkit-animation 属性说明http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

答案3

将其添加到%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

body:empty {
    background: black;
}

相关内容