兩個單獨的背景圖像

我想讓我的頁面有兩個背景圖像：一個在頂部，一個在底部。不過，我不希望它們是靜態的。我將如何做到這一點？兩個單獨的背景圖像

2010-02-01 Ethan Turkeltaub

多一點信息將是有益的，因爲prodigitalson指出。一個模型也會很有幫助。這裏有很多變量，並且有很多不同的方法可以用CSS來實現。 –

這真的取決於你需要什麼樣的頁面看起來像什麼樣的背景圖像。如果你想要一個解決方案你需要發佈更多的細節，最好有一個頁面應該看起來像一個合成圖像和一個自己的圖像的例子。

提到的一種方式可能是：

html {backgoround: trasnparent url(/path/to/image) scroll no-repeat top center;} 
body {backgoround: trasnparent url(/path/to/other-image) scroll no-repeat bottom center;}

來源

2010-02-01 19:49:44 prodigitalson

我想要做的是有第一個圖像在頁面的頂部（如「背景：URL（/路徑/到/圖像）repeat-x;」）。第二張圖片沿着頁面的底部。所以，當你向下滾動到頁面的結尾時，它就在底部。 –

對，但你不會有一個設置頁面高度是你？當頁面很短，很長，正常等時，你如何需要這些圖像的行爲？你需要一個純色之間？這種顏色是與底部圖形的頂部還是頂部圖形的底部相關的？ – prodigitalson

將div與背景圖像結合使用，並使用佈局或定位屬性進行適當的放置。你可以把它放在頂部，放在一個絕對位置和z-indexed的div中，放在你的常規頁面下面。然後另一個可以放在身體的風格和定位在底部。

來源

2010-02-01 19:48:24

請零裕度和填充，像這樣兩個嵌套的層：

<div class="outer"> 
    <div class="inner"> 
    <!-- Page goes here. --> 
    </div> 
</div>

然後具有外部和內部，一個固定到頂部，一個固定於底部的一個單獨的背景圖像：

.outer { 
    background-position: bottom; 
    // ... 
} 

.inner { 
    background-position: top; 
    // ... 
}

來源

2010-02-01 19:48:56

兩個單獨的背景圖像

回答

相關問題