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

d6kp6zgx 于 2023-11-19 发布在其他

关注(0)|答案(6)|浏览(167)

网站链接：
http://www.ideagang.co/home.php
当从一个页面点击到另一个页面时，是否可以将背景设置为黑色？现在网站完美地加载了黑色背景，只是当我从一个页面导航到另一个页面时，页面flickr了一秒钟。
有没有办法解决这个问题，当内部加载页面时，将背景设置为黑色？

css

来源：https://stackoverflow.com/questions/18937469/set-page-load-to-black-instead-of-white-background

6条答案

按热度按时间

kpbwa7wx1#

不只是使用CSS。浏览器的默认背景色是白色，所以你看到的 Flink 是默认的，在它有机会阅读CSS规则使其变黑之前的一瞬间。
我能想到的解决这个问题的唯一方法是加载第一个页面，然后通过JavaScript从一个页面切换到另一个页面，将它们加载到退出的页面。没有重新加载意味着没有 Flink 。在我看来，这是一个非常小的价值吨的开销，所以我建议只是接受它。

赞(0）回复(0）举报 2023-11-19

mwkjh3gx2#

我非常怀疑这是可能的CSS。
你有没有试过

<body background="#000">

字符串
这是长期不赞成，但可能会有帮助。我认为你仍然会得到一个白色闪光灯，但它可能是较少的时间。
你也可以尝试在标题后的头中放置一小块CSS。

赞(0）回复(0）举报 2023-11-19

kx7yvsdv3#

html5通过CSS实现这一点的方法是：

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

字符串
我也试着把这个CSS样式作为<head>的第一件事：

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

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

赞(0）回复(0）举报 2023-11-19

zbdgwd5y4#

虽然这是一个相当古老的问题，但希望这可以帮助其他沿着前行的人（像我一样）：
使用一些JavaScript似乎对我有用（只在Firefox 84.0 - Ubuntu上测试）：

index.html：

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

字符串

script.js：

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

型

赞(0）回复(0）举报 2023-11-19

vmjh9lq95#

我相信最有效的方法是将背景颜色放在主文档文件中的html标签中。

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

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

赞(0）回复(0）举报 2023-11-19

vngu2lb86#

在html根元素上设置color-scheme: dark light;样式或一个颜色方案Meta标记似乎可以避免设置了暗模式的用户出现白色闪光。这告诉浏览器页面适合亮模式和暗模式，因此它知道它可以使用暗模式UA（用户代理）样式，其中包括暗背景色。
不幸的是，浏览器只能在html被获取和解析之后才能知道这一点，所以它在SPA应用中工作得特别好，这些应用的初始index.html很小，页面已经缓存，或者正在通过快速CDN。这里的所有其他解决方案都有同样的问题，并且需要浏览器将默认颜色设置为深色-出于兼容性原因，他们无法做到这一点，或者是一个浏览器扩展，以避免在index.html加载之前出现明亮的闪光。
使用color-scheme的好处是，对于浅色模式的查看器，它不会 Flink 深色。
缺点（或者可能是优点，取决于）是它将改变浏览器渲染各种内置元素的方式，以适应用户/开发人员期望的适当主题。CSS Tricks有一些例子。下面的片段显示，对于input，它将更改为深色背景。
请注意，当iframe渲染时，代码片段本身会 Flink ，这表明了任何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>

字符串

赞(0）回复(0）举报 2023-11-19

我来回答

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

6条答案

index.html：

script.js：

相关问题

热门标签

最新问答