應用多個重疊的背景圖像

我正在構建一個設計，我不是100％確定如何執行。這是一個非常粗略的例子。應用多個重疊的背景圖像

從本質上講，我需要一個簡單的背景紋理水平重複到無窮大。最重要的是，在我的內容下面，我需要在背景中添加一些口音，這些口音比保存我的內容的divs稍寬。在我的例子中，我用div完成了這個目的，只是添加這個額外的背景圖片......但這看起來很笨重。

有沒有更好的方法來完成這個？

編輯：我的白色頁腳需要伸展到屏幕的底部和兩側。

來源

2012-11-08 Vecta

有些困惑我開始：你希望背景在垂直方向上重複到無窮大呢？您聲明頁腳應該是100％，但在小提琴中，它與內容div一起被列爲100 px。 –

對不起，我感到困惑。頁腳'div'不一定需要100％寬度。我只需要頁腳看起來全白，然後水平向下伸展到無限遠。 – Vecta

可以使用CSS3。除了和往常一樣，它在IE9家族中並沒有出現，除此之外，它得到了很好的支持。

http://www.css3.info/preview/multiple-backgrounds/

除此之外，你正在做的方式是理想的。

來源

2012-11-08 21:12:15 smdrager

幾點意見：

當你想擁有它繼續「到無窮大」的尺寸則通常有涉及（JavaScript）的計算，因爲如果一個滾動條存在，那麼100％的不覆蓋整個屏幕。然而，當使用一張圖片時，會有一個巧妙的css技巧，它會自動爲您拉伸，background-size: cover;。作爲一個例子，我已經將它加入到小提琴中。我也用CSS添加了一些頁腳。由於沒有可用的javascript，這個例子使用了一個低於z-index值的整個屏幕大小的div來提供頁腳背景顏色。爲了突出頁腳，我用黑色背景和文本的白色突出顯示了它。你可以進入並改變它們（這是你想要的），但爲了顯示，我使用了更多的對比度，所以你可以看到效果。

這裏是例子：http://jsfiddle.net/cgRyH/2/

來源

2012-11-08 21:38:14

應用多個重疊的背景圖像

回答

相關問題