将页面加载设置为黑色而不是白色背景？

问题描述 投票：0回答：6

网站链接：

http://www.ideagang.co/home.php

从一页点击到另一页时可以将背景设置为黑色吗？ 现在，网站以黑色背景完美加载，只是当我从一个页面导航到另一个页面时，页面闪烁了一秒钟......

有没有办法通过在内部加载页面时将背景设置为黑色来解决这个问题？

html css load flickr
6个回答
3
投票

不只使用CSS。浏览器的默认背景颜色是白色，因此您看到的闪烁是在有机会读取 CSS 规则将其变为黑色之前的一瞬间的默认情况。

我能想到的解决这个问题的唯一方法是加载第一个页面，然后通过 JavaScript 从一个页面切换到另一个页面，将它们加载到退出页面中。没有重新加载意味着没有闪烁。在我看来，这是大量的开销，但价值却很小，所以我建议忍受它。

1
投票

我非常怀疑 CSS 是否可以做到这一点。

您尝试过使用

<body background="#000">

它已被长期弃用，但可能会有帮助。我认为您仍然会看到白色闪光，但时间可能会更短。

您还可以尝试将一小块 CSS 作为标题中标题后的第一件事。

0
投票

现在通过 CSS 执行此操作的 html5 方法是：

<body style="background-color:#000">

还尝试将此 CSS 样式作为 

<head>
中的第一件事：

<style type="text/css">
    body{background-color:#000}
</style>

...但在我的应用程序中，它仍然导致短暂的白色闪光

0
投票

虽然这是一个很老的问题，但希望这可以帮助那些跌跌撞撞的人（像我一样）：

使用一些 javascript 似乎对我有用（仅在 Firefox 84.0 - Ubuntu 上测试）：

index.html：

<script src='script.js'></script>

脚本.js：

onload = function() {
    document.body.style.backgroundColor = 'black';
}
0
投票

我相信实现此目的最有效的方法是将背景颜色放置在主文档文件中的 html 标签本身中。这样

<html lang="en" style="background-color: #111">

有了这个，你可以设置任何你想要的背景颜色，它应该可以工作。

0
投票

在根 html 元素上设置 

color-scheme: dark light;
样式或颜色方案元标记 似乎可以避免设置暗模式的用户出现白色闪光。这告诉浏览器该页面适合浅色和深色模式，因此它知道它可以使用包含深色背景颜色的深色模式 UA（用户代理）样式。

不幸的是，浏览器只能在获取并解析 html 之后才能知道这一点，因此它在初始 index.html 很小、页面已经缓存或正在通过快速 CDN 的 SPA 应用程序上尤其有效。这里的所有其他解决方案都有相同的问题，并且需要浏览器将默认颜色设置为深色 - 由于兼容性原因，他们无法这样做，或者浏览器扩展能够避免索引之前的明亮闪烁.html 加载。

使用 

color-scheme
相对于仅设置背景的好处是，对于浅色模式查看者来说，它不会闪烁深色。

缺点（或者可能是优点，视情况而定）是，它将改变浏览器呈现各种内置元素的方式，以适应用户/开发人员所需的适当主题。 CSS Tricks 有一些例子。下面的代码片段显示，对于 

input
，它会更改为深色背景。

请注意，在 iframe 渲染时，代码片段本身会闪烁，这表明任何 html/css/js 解决方案都存在此问题。

<html>

<head>
  <meta name="color-scheme" content="dark light">
</head>

<body>
  <input type="text" value="dark!" />
  <input type="text" style="color-scheme: light" value="light!" />
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.