如何創建沒有背景圖片的固定背景滾動效果？

我在頁面上有一個水平和垂直居中的圖像。我喜歡它，所以當用戶向下滾動時，其下面的內容實際上會出現，就好像頂部內容是固定的。像這樣的效果... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/如何創建沒有背景圖片的固定背景滾動效果？

唯一的問題是，他們使用background-attachment：fixed屬性的效果。我不能使用這個，因爲我需要圖像作爲內容（它實際上會更改爲HTML5視頻）。

我的代碼是在這裏... http://jsfiddle.net/5jphd/1/

HTML

<div class="image"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg"> 
    <div class="text">Scroll down</div> 
</div> 
<div class="wrap"> 
    Here is some content 
</div>

CSS

html, body {height: 100%} 

body { 
    padding: 0; 
    margin:0; 
    font-family: sans-serif; 
} 
.image { 
    position: relative; 
    left: 0px;  
    height: 100%; 
    background-position: 50% 50%; 
    background-size: cover; 
    background-attachment: scroll; 
    text-align: center; 
} 
img { 
    max-width: 90%; 
    max-height: 70%; 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

.text { 
    position: absolute; 
    bottom: 20px; 
    left:50%; 
    margin-left: -44px; 
} 
.wrap { 
    background-color: lightblue; 
    text-align: center; 
    padding: 100px; 
    font-size: 30px; 
    min-height: 1000px; 
}

這可能也與此標記？所以當你向下滾動時，內容會上升並重疊圖像。

來源

2014-01-26 Adam

我有點糊塗..爲什麼不使用固定的HTML5視頻呢？你只需要使內容背景透明。 *順便說一句，如果您使用高清HTML5視頻背景，很多電腦會像瘋了一樣落後。即使是5秒鐘的重複片段也會像5MB一樣，並且幾乎會使較舊的電腦/筆記本電腦和大量手機崩潰。 –

這是你正在努力實現的嗎？ http://jsfiddle.net/5jphd/2/ –

是GCyrillus是我後來的結果，除了圖像必須在圖像標籤，並沒有使用背景圖像。 – Adam

好吧，我已經做到了，這是我想達到的。我只是做了視頻和文字滾動的位置是：固定的，並提出了主體內容的位置是：相對 - http://jsfiddle.net/5jphd/4/

html, body {height: 100%} 

body { 
    padding: 0; 
    margin:0; 
    font-family: sans-serif; 
} 
.image { 
    position: relative; 
    left: 0px;  
    height: 100%; 
    background-position: 50% 50%; 
    background-size: cover; 
    background-attachment: scroll; 
    text-align: center; 
} 
img { 
    max-width: 90%; 
    max-height: 70%; 
    margin: auto; 
    position: fixed; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

.text { 
    position: fixed;  
    bottom: 20px; 
    left:50%; 
    margin-left: -44px; 
} 
.wrap { 
    background-color: lightblue; 
    text-align: center; 
    padding: 100px; 
    font-size: 30px; 
    min-height: 1000px; 
    position:relative; 
}

來源

2014-01-26 20:56:58 Adam

JSFiddle

我想這就是你基本上要求。牢記長寬比，這是高清視頻可能在320x480左右的樣子。

#bg { 
    position:absolute; 
    position:fixed; 
    top:0; 
    width:100%; 
    height:100%; 
    margin:auto; 
    overflow:hidden; 
    z-index:-1; 
} 
#bg img { max-width:100%; }

來源

2014-01-26 20:46:52

如何創建沒有背景圖片的固定背景滾動效果？

回答

相關問題