CSS3多重背景？

根據QuirksMode，定義多個背景（至少）在IE9，Chrome和Firefox 3.6中起作用。
我有以下的CSS：CSS3多重背景？

background: #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top; 
background: url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed right -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground1.png") repeat-x fixed left bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground2.png") repeat-x fixed left 50px bottom 50px, url("http://static.pokefarm.org/_img/gradients/dark_ground3.png") repeat-x fixed left bottom 200px, url("http://static.pokefarm.org/_img/gradients/dark_lightning.png") no-repeat fixed right -100px top -150px, #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;

這是一個相當複雜的背景，但它使我的網遊「暗世界」的背景效果。實際上，它有三個不同的「地面」層，一個漸變的天空，兩個「邊緣」可以讓屏幕兩側的地面漸漸消失，還有閃電。舊版瀏覽器應該只能看到「黑暗的天空」漸變背景。
由此產生的效果應該是：Screenshot。

現在來解決這個問題：IE9完美地顯示了這個效果，甚至可以做可選的「動畫背景」效果，其中地面層以視差方式滾動，並且閃電閃爍和CSS變形扭曲。但是，Firefox 6和Chrome 13僅顯示後備漸變背景。

有沒有人有任何想法，爲什麼會發生這種情況？

來源

2011-09-07 Niet the Dark Absol

定義它看上去就像一個鉻錯誤或不落實scenarion，雖然這是[CSS3文件]上（HTTP ：//www.w3.org/TR/css3-background/#background-position），即使我們在一個單獨的屬性中輸入了'background-position'，它也會失敗。一種避免完全失敗的方法是從速記中提取所有的「background-position」部分，並將它們放在它們自己的屬性上，然後只有'background-property'會失敗，而不是整個背景。 – Luizgrs

我寧願有「備份」漸變 - 只有如何，比缺乏定位打破的背景。 –

要回答我自己的問題，Chrome和Firefox都不支持background-position以上的兩個值。讓我想知道他們如何將相對於右下角的背景圖像...

來源

2011-09-10 21:52:22

原來的答案是相當古老的，所以我想我會爲任何人來到這個頁面添加一個解決方案。您可以設置多個背景位置，就像您可以設置多個背景一樣。

儘管我不確定問題首次被問到時是否存在支持。

看來，支持現在相當穩定。 http://caniuse.com/#feat=multibackgrounds

background-image: url(image1.png), url(image2.png); 
background-position: center bottom, left top;

您用逗號分隔的背景位置，他們的順序是在background-image

來源

2015-07-02 10:33:44

嗨，亞歷克斯，感謝您的回答，但我恐怕這並不能回答這個問題;）儘管我的確提出了這個問題，但它實際上是將單個背景圖像放置在距離右下角16像素處。您應該能夠將「正確的16px底部0」作爲背景位置，但是在發佈Chrome和Firefox時都不支持這一點。我相信他們現在做，但我沒有檢查。 –

啊，我明白了。（我可能沒有完全正確地閱讀它，我的壞！）我會離開這個答案:) 我明白你的意思了。我知道你可以指定像素'background-position：25px 150px'，但我相信這總是從左上角開始，正如你所提到的。不是從右邊或底部。（我之前沒有遇到過這種語法）。如果使用Javascript，可以進行簡單的計算（儘管對於所有情況這並不總是有效的解決方案）。我不知道任何允許底部和右側對齊的瀏覽器更新，雖然我沒有完全檢查。謝謝回覆 –

CSS3多重背景？

回答

相關問題