2013-02-02 112 views
11

我有2個圖像作爲我的身體的背景:css3多背景圖像的後備?

background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat; 

我發現爲了顯示upper_bg.png上述bg.png形象,我需要首先將其放置在列表中。然而,對於不支持多種背景的瀏覽器,我只想顯示bg.png,我擔心瀏覽器會降至upper_bg.png而不是bg.png。我該如何解決這個問題?

回答

20

簡單地增加一個background聲明與多背景前剛剛bg.png應該這樣做:

background: url(../img/bg.png) repeat; 
background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat; 

舊的瀏覽器會忽略第二線並保持第一線;他們不應該嘗試使用第二行的任何部分。支持多種背景的瀏覽器將使用第二行,而不是第一行,如同正常情況下重寫它。

+0

這可以用於圖像不可用的後備圖像嗎? (例如,具有後備輪廓的配置文件圖像,但在常規處理過程中使用404s可能不是canon) – rookie1024

+0

如果我們具有用於回退的不同圖像,是否會有額外的請求? – nickspiel

+0

@ rookie1024:不幸的是,沒有。 IIRC有一個不同的提案,用於在圖片不可訪問的情況下提供回退 - 這將需要不依賴級聯的不同語法,因爲級聯是完全不同的概念。 – BoltClock