將絕對定位的圖像放在我的頁面上

在此網站上我有一個自動調整大小的BG，但我希望在頁面底部有一個固定的黑色條。將絕對定位的圖像放在我的頁面上

當瀏覽器最大化時，網站看起來很好，但是當您縮小窗口並向下滾動黑條時，幾乎完全消失，看起來很亂。它沒有正確定位。

我已經嘗試了一些東西，但無法找出解決方案。有沒有人有任何想法我應該怎麼做呢？（也許我錯過了一件小事，或許我需要從頭開始，無論哪種方式請幫助！）

注意：auto尺寸的背景是在html標籤中，而黑底部的橫條在它自己的獨立div標籤「#black_bottom」

http://graves-incorporated.com/test_sites/gm_2012/

2012-01-04 Dan Graves

好了，我想我看到你要什麼了。如果我的理解是正確的，那麼您需要將漸變背景延伸到內容框底部邊緣上方約70-73像素的位置，並將其與滿足延伸至窗口底部的實心灰色條或其下方的圓形G徽章，以較低者爲準。我通過完成了此操作，完全刪除#black_bottom元素，爲html元素設置純色背景色以匹配底部條形圖的顏色，並將圓形漸變背景應用於body元素。我還從#wrapper中刪除了明確定義的高度，並給出了一個負面的margin-bottom以允許黑色條形低於它。下面列出了我替換的樣式。希望這更接近你之後的東西：

html { 
    background: #333; 
} 

body { 
    background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed; 
    background-size: cover; 
    height: 100%; 
} 

#wrapper { 
    width: 960px; 
    margin: 0 auto -136px; 
    top: 20px; 
    position: relative; 
}

來源

2012-01-04 05:57:19 Aaron

當我這樣做，它不起作用 – 2012-01-04 08:17:37

我剛剛意識到我忘了添加'＃black_bottom'和'位置：相對;'到包裝'z-index：-1'。我在我的答案中編輯了樣式定義以包含它們。此外，您需要進入您的HTML並確保您正確關閉所有標籤。 '＃wrapper'在'＃black_bottom'的*裏面，它應該*在*之前。 – Aaron 2012-01-04 16:25:25

*還有'min-height：100％;'到'＃wrapper' – Aaron 2012-01-04 16:28:16

你有一切包裹不正確，我相信。爲什麼<div id="black_bottom>包含從包裝到<div id="footer_wrap">的所有內容？

來源

2012-01-04 05:58:38

在firts，我沒有把它包裹在一切，但它沒有顯示出來，所以我把它包裝一切，它出現了。我不明白爲什麼，但它似乎工作，所以我去了。我該如何解決這個問題？ – 2012-01-04 08:18:52

剛刪除height:100%從#black_bottom使absolute:position div height auto。

來源

2012-01-04 06:34:50 sandeep

謝謝你的工作，我知道我過去看起來很簡單！ – 2012-01-04 07:52:55

其實這並不能解決問題。當你使瀏覽器更薄時，你必須滾動到一邊它不會填滿底部100％.... – 2012-01-04 08:17:15

將絕對定位的圖像放在我的頁面上

回答

相關問題