防止背景消失

所以我有一個CSS漸變背景的正文。然後我有一個絕對定位的div嵌套在一個背景覆蓋。接下來，內容包裝div將嵌套在此內。我想要修復背景div和網頁在頂部滾動。問題是，當頁面滾動背景疊加div類似消失像捲簾...防止背景消失

這裏是我的小提琴來演示這個問題... http://jsfiddle.net/WPk6h/（嘗試滾動結果窗格，看看我的意思是效果）。

HTML ....

<body> 
    <div id="bgwrapper"> 
     <div id="wrapper"> 
      Content... 
     </div> 
    </div>  
</body>

和CSS ...

body { 
    background-color:#fcf 
} 
#bgwrapper{ 
    position:absolute; 
    top:0;bottom:0;left:0;right:0;width:100%;height:100%; 
    background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom; 
    background-size:cover; 
    background-attachment:fixed;  
} 
#wrapper { 
    width:300px; 
    margin: 0 auto; 
}

任何想法如何防止這種情況，這樣的背景覆蓋在任何時候都保持可見？

請注意......我還沒有在所有瀏覽器中對它進行嚴格測試 - 問題出在我一直使用的第一個瀏覽器上，所以我還沒有到其他人測試過。

編輯...

人們想知道爲什麼我不只是應用背景圖像的HTML或BODY標籤 - 嗯，有CSS漸變和背景圖像之間的衝突 - 你不能讓他們既在相同的元素中，如下面兩個例子所示。這就是爲什麼我使用額外的背景包裝div來創建覆蓋漸變bg的5％alpha圖像的效果。

http://jsfiddle.net/tqbtm/（試圖梯度和 BG圖像添加到body標籤）

http://jsfiddle.net/ca5wa/（添加背景圖片到BG包裝DIV 在身體梯度）

來源

2013-05-20 Doug

不明白「bgwrapper」的意思：http://jsfiddle.net/WPk6h/3/ – Pete

公平評論，@Pete。基本上，如果你使用的CSS漸變，你不能也應用圖像的背景 - 比較這個http://jsfiddle.net/ca5wa/身體有一個漸變和#bgwrapper有圖像，這個http：///jsfiddle.net/tqbtm/其中我試圖添加漸變*和*圖像BG到身體 – Doug

啊正確的，不知道你是使用漸變 – Pete

您需要從#bgwrapper刪除position: absolute div：

#bgwrapper{ 
    width:100%; 
    height:100%; 
    background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom; 
    background-size:cover; 
    background-attachment:fixed;  
}

Update jsfiddle

來源

2013-05-20 13:34:37 Morpheus

的第一句話那當然似乎已經完成了這個訣竅，但我會承認會有些困惑 - 當然，絕對定位必須將div從DOM流中解脫出來？我將在頭幾分鐘的時間裏頭部劃傷:) Backson ... – Doug

當div被定位絕對高度被設置爲高度：100％的視口高度，並且文本內容正在流出的。如果你在'＃bgwrapper'上設置了「overflow：hidden」，內容也會在圖像消失的同一點被剪切掉。移除定位可保持DOM流中的div，並在滾動背景時保持固定。 –

也添加'邊距：0'到身體否定默認樣式並刪除圖像之前的空間 - http://jsfiddle.net/duncan/WPk6h/5/ –

設置爲固定

position:fixed

在位置...

#bgwrapper{ 
position:fixed 
top:0;bottom:0;left:0;right:0;width:100%;height:100%; 

    background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom; 
    background-size:cover; 
    background-attachment:fixed;  
}

來源

2013-05-20 13:41:03

：S它已經是！檢查我的OP。 – Doug

@Doug呃，這不是，現在也不是。我錯過了什麼嗎？它現在讀取位置：絕對在問題和小提琴http://jsfiddle.net/WPk6h/它也是位置：絕對。當我將它改變爲位置時：它在早先固定在小提琴上，它解決了你的問題。現在刪除修復它。 –

你絕對正確，我感到羞恥，@Rob Kielty！我誤解了你的背景附件：固定。如果你會這麼友好地編輯你的答案，我會稍微刪除我的downvote。我對這種混亂表示抱歉。然而，最終的解決方案只涉及完全刪除整個位置聲明 - 它不需要它。 – Doug

你也可以看看下面的鏈接：

http://css-tricks.com/perfect-full-page-background-image/

哪些細節幾種不同的全屏幕，固定，背景的方法

我目前使用的方法是方法1（CSS3）這類技術

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2013-05-20 13:55:10 kolin

感謝@kolin - 一個方便的資源，但目前還沒有大量適用於我，因爲我的身體CSS漸變在作品中引發了一些問題:)我通常會使用您提到的技術，但我傾向於將其添加到BODY標籤本身...我的身體標籤目前正用於背景漸變。我想我可以嘗試在BODY上設置HTML和bg圖像上的漸變，但現在它正在工作......如果它沒有損壞，那麼！ :) – Doug

的道格告訴你只需要添加background-attachment:fixed;background-size:cover;width:100%;height:100%;您#bgwrapper風格。

來源

2013-05-20 14:09:30

對不起，但所有這些屬性已經在我的CSS ...關鍵是要刪除絕對定位。 – Doug

對不起，我真的很抱歉，我會刪除回覆，但你可以請給予好評，我不想失去評級:(我會給予好評您的解決方案，因爲答覆我離開 –

行 - 但我相信你需要編輯回答之前我可以改變我的投票 – Doug

防止背景消失

回答

相關問題