我爲我妹妹的生日爲一家假公司創建了一個網站,並且我在修復背景時遇到了一些麻煩。我知道這應該是簡單的,只是一個附件的問題:固定的,但似乎沒有工作的原因。那麼其原因顯然是我,但我想你能幫助我解決這個:)修正了頂部導航欄和滾動的背景
這裏是網站:http://camilleperrin.fr/BBE/,當你需要滾動(此頁上,如果你有一個1920x1080分辨率顯示的問題:http://camilleperrin.fr/BBE/index.php?page=careers )。如果你有一個巨大的屏幕,你不能看到問題,背景圖片不會留在它應該的地方,並隨着滾動下去。
這裏是我的代碼(我被互聯網的幫助下,我沒有想出這一切我自己):
CSS:
body{
background:url('background.jpg') no-repeat center 160px fixed;
}
#overallcontainer{
padding: 70px 90px 120px 90px;
}
#blurcontainer {
position: relative;
}
#blurbg{
background:url('background.jpg') no-repeat center 160px fixed;
text-align:center;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 99;
width:800px;
margin:0 auto;
padding:60px;
-webkit-filter: blur(5px);
}
#textContainer {
position: relative;
z-index: 100;
background: rgba(0,0,0,0.65);
margin:0 auto;
color:#dde;
width:800px;
padding:60px;
text-align:justify;
}
HTML:
<div id="overallcontainer">
<div id="blurcontainer">
<div id="blurbg"></div>
<div id="textContainer">
blah blah blah
</div>
</div>
</div>
如果您對我如何解決這個問題有所瞭解,同時保留我的模糊文本容器,這將是真正的幫助湖
謝謝!
Camile
你可以指定你的環境,因爲一切都在我的安裝的瀏覽器(PC與Firefox,IE和歌劇工作正常)? – scraaappy
@silviagreen,兩個背景都固定在我共享的代碼版本上。我只是用阿齊茲的答案更新了頁面,所以現在兩張圖片都不匹配了。 –
@scraaappy,我在PC,Windows 7,Chrome上,但是我嘗試過使用Firefox,並且遇到了同樣的問題:當您滾動時,背景上出現白色條紋(再次,我已更新了該建議阿齊茲,所以它現在看起來不是這樣:)) –