CSS背景附件固定 - 流出？

我有一些HTML這樣的：CSS背景附件固定 - 流出？

<div id='container'> 

    <div id='main'> 

    </div> 

</div>

而CSS

div#container { 
    width:960px; 
    margin:0 auto; 
} 

div#main { 
    background: #000000 url('images/bg_placeholder.jpg') no-repeat 85% 100px fixed; 
    color:white; 
    padding-bottom:30px; 
}

的#main是相同的寬度爲#container的。我試圖把固定的背景圖像放在#main的右上角。但是，當我把background-attachment：固定的時候，它似乎將它從流中移除...

在那個圖像中，它並沒有被放置在main的右上方，而是看起來像頂部右側的頁面，或者可能是容器。

在滾動模式下，它位於主要位置。它只有當一個開關要修復。

這是如何工作的？有沒有解決的辦法？

來源

2011-09-20 djt

你正在'position：fixed;'爲#main的子元素嗎？那是對的嗎？ –

標題很清楚：'background-position：fixed' ... @dtj，你能向我們展示你的CSS源碼嗎？ –

最後，你設置了哪一個「固定」？ 'background-position'或'background-attachment'？ – kapa

不確定你想要達到的目標，但希望這至少可以部分回答你的問題。

我重新創建了你的情況here。刪除background-attachment:fixed;似乎解決您的問題，如果我明白你想要做的正確。

從the Sitepoint article上background-attachment：

固定的值從與它含有塊停止滾動背景圖像。請注意，雖然固定的背景圖像可能是應用於整個文檔中的元素，但其背景位置始終與視口相關。這意味着背景圖像僅在其背景位置與元素的內容，填充或邊框區域一致時纔可見，它將應用到。因此，固定的背景圖像不隨元素移動，因爲它與視口的位置關係爲，所以元素具有滾動條 - 參見溢出。

編輯：這裏是爲您解決問題的可能方式：http://jsfiddle.net/ep6kQ/3/

編輯編輯：獲取圖像有問題消失，當用戶滾動包含元素的下方。有人知道怎麼修這個東西嗎？

來源

2011-09-20 16:46:20

以及我需要附件是固定的，以便它不滾動。這就是爲什麼林修復。但是您的其他評論回答了我的問題，因爲我不知道固定與視口有關，所以謝謝！ – djt

很高興能幫到你！看看我的編輯另一種可能解決您的問題的方法。這是一種黑客行爲，但至少這是一個開始。 –

刪除固定並在圖像中使用CSS中的保證金屬性。這是一個醜陋的修復，但它可能會起作用。也可以嘗試使用絕對值而不是固定值。（我目前無法測試，安裝軟件。）呃。

來源

2011-09-20 16:35:21

絕對定位不是背景位置的選項嗎？ – djt

也，如果我刪除固定，它會然後滾動，我不能有 – djt

CSS背景附件固定 - 流出？

回答

相關問題