设置背景图片加载前的网页背景颜色

我有一个web应用程序，背景图像是深色。它的大小也超过100KB。（我真的不喜欢背景图像是那么大，但这不是我能做的任何事情，也不是这个问题的主题..另外它是JPEG！网页设计来自客户，我必须保持原样，尽管我的抗议！）设置背景图片加载前的网页背景颜色

由于背景图像主要由深色（几乎黑色）组成，文本是白色的。

麻烦的是，用户第一次进入网页时，背景是白色的（默认浏览器背景），文字也是白色的，所以您无法阅读任何文字。只有在加载了背景图片后，才能阅读文字。（该页面加载一个CSS文件，这将加载另一个CSS文件，并在此指定背景图像，因此在高延迟连接（如UMTS移动互联网连接）上，这可能需要几秒钟的时间。）

有什么办法可以说：“这个页面的背景应该有一个特定的背景图像（如现在），但除此之外应该是黑色的，即黑色将被显示直到背景图像被加载，或者如果它不加载” ？这样，用户就能够立即阅读文本。我确信我已经看到了这个（或者是表格单元格背景？），但唉，不记得怎么样，谷歌也没有帮助。

目前的CSS是：

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

我已经加入“黑”到“背景”的属性，但是这并没有帮助。

您是否添加“黑色”并同时取出“透明”？ – 2011-03-02 11:55:25

啊！我不敢相信我错过了...感谢所有回答的人！ – 2011-03-02 12:02:30

其实这是很容易，只需改变你已经有了代码：

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

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

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

<style type="text/css"> 

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

</style>

这应该使背景黑色直线距离:)

2011-03-02 11:54:39 Kyle

这应该这样做

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

这将适用于黑色你的身体。

2011-03-02 11:53:18 JohnP

以前的答案应该工作，但柜面他们不这是另一个窍门。您可以使用JavaScript预先加载图像，然后更新主体的样式，以便使用您加载的图像作为背景。

你可以在这里看到一个使用jquery的例子http://jqueryfordesigners.com/image-loading/。其实，我认为这就是你需要的。

2011-03-02 12:00:07 ptigas

回答