設置背景圖片加載前的網頁背景顏色

我有一個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

回答