Question

我有一个Web应用程序，背景图像是深色。它的大小也超过100KB。（我真的不太欣赏背景图片那么大，但这不是我能做的任何事情，或者这个问题的主题..另外它是一个JPEG！..网页设计来自客户和我尽管我有抗议活动，但我必须保持原样！）

由于背景图像主要由深色（近黑色）组成，因此文本为白色。

问题是，用户第一次进入网页时，背景为白色（默认浏览器背景），文本也是白色，因此您无法阅读任何文本。只有在加载背景图像后，才能阅读文本。（页面加载一个CSS文件，这会加载另一个CSS文件，并在此指定背景图像。因此，在UMTS移动互联网连接等高延迟连接上，这可能需要几秒钟。）

有没有办法说“这个页面的背景应该有一个特定的背景图像（现在），但另外应该有黑色，即黑色将显示，直到背景图像已加载，或如果它没有'加载'？以这种方式，用户将能够立即阅读文本。我确定我已经看到这样做了（或者是表格单元格背景？）但是唉不记得谷歌搜索也没有帮助。

目前的CSS是：

body {
    background: transparent url(bg.jpg) top left no-repeat;
}

我在“背景”属性中添加了“黑色”，但这没有帮助。

Answer 1

实际上这很简单，只需更改已有的代码：

body {
    background: #000 url(bg.jpg) top left no-repeat;
}

transparent有身体元素的背景颜色，现在设置为黑色。

正如你所说，它的加载速度很慢（通过两个CSS文件），它可能会闪烁白色。通过在文档的<style>部分中使用<head>标记可以避免这种情况：

<style type="text/css">

body {
    background: #000 url(bg.jpg) top left no-repeat;
}

</style>

这应该让背景变黑了:)

Answer 2

这应该这样做

body {
    background: url(bg.jpg) top left no-repeat #000;
}

这会将黑色涂抹在您的身上。

Answer 3

之前的答案应该有效，但是如果不是这样的话，那就是另一个伎俩。您可以使用javascript预加载图像，然后更新正文样式，以便将您加载的图像用作背景。

您可以在http://jqueryfordesigners.com/image-loading/查看使用jquery的示例。实际上，我认为这就是你所需要的。