讓圖像向上滾動，同時修復多個背景

我希望三個背景保持固定，而圖像向上滾動時會留下背景標題和其他背景。有了下面的代碼，它只是向下滾動，丟失了頁面上的背景圖片。讓圖像向上滾動，同時修復多個背景

編輯：我已經更新了jsfiddle與司標記上的固定位置，但現在圖像不滾動。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> 
<html> 
<HEAD> 
<style type="text/css"> 
body { background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Background-2013.gif') ; 
     background-repeat: no-repeat; 
     background-color:black; overflow:none;} 


.bgimg-paisley { 
    background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/black-paisley-background.jpg'); 
    background-repeat:no-repeat; 
    overflow:none; 
    background-size: cover; 
     background-attachment:fixed;  
     margin: 0; 
     padding: 0; 
     height: 100%; 
     width: 100%; 
} 

.bgimgborder { 
    background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/runner-for-paisley-test.gif'); 
    background-repeat: repeat-y; 
    width:720px; 
     background-size: cover; 
    background-attachment:fixed;  
     margin: 0; 
     padding: 0; 
     height: 100%; 

} 

.imgpadding { 
    padding-left:10px; 
} 

--> 
</style> 

</head> 
<body> 

<div class="bgimg-paisley" style="position:absolute;top:97px;left:0px;width:100%;"> 
    <div class="bgimgborder" style="position:absolute;top:0px;left:200px;"> 
    <img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
    <div style="height:80px;"></div> 

    <img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
    <div style="height:80px;"></div> 
    <img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
    <div style="height:80px;"></div> 
    <img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
    <div style="height:80px;"></div> 
    <img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
    </div> 
</div> 

</body> 
</html>

來源

2015-07-28 Greg

你能解釋一下「背景標題和其他背景」是什麼意思嗎？你想留下哪些圖片，哪些圖片應該移動？ – henry

我想要修復所有背景圖像。只希望img標籤向上滾動。因此觀看者總是看到圖像上帶有黑色背景和白色/灰色邊框的標題。 – Greg

Background-position: fixed涉及後臺到其容器，但不保持容器本身移動。爲了得到例如一個標題始終保持在同一個地方，將position: fixed添加到標題本身。 http://www.w3schools.com/css/css_positioning.asp

來源

2015-07-28 13:16:14 henry

由jsfiddle更新了固定位置，但現在圖像不可滾動。我試圖把它們放在一個沒有運氣的單獨的div中。有任何想法嗎？ – Greg

沒有完全讓我的解決方案，但我得到了接近謝謝澄清。 – Greg

很高興這是指出你在正確的方向！如果你撞到另一堵牆，請不要猶豫。附：對於下一個牆：我發現固定和絕對定位的元素主要是搞清楚我正在努力做什麼 - 有時可能需要一段時間，但一旦你到達那裏，事情就會打開 – henry

試試這個從div刪除class="bgimg-paisley"並把它添加到body。

<body class="bgimg-paisley"> 
    <div style="position:absolute;top:97px;left:0px;width:100%;"> 
     <div class="bgimgborder" style="Position:absolute;top:0px;left:200px;"> 
     <img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
     <div style="height:80px;"></div> 
     <img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
     <div style="height:80px;"></div> 
     <img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
    </div> 
    </div> 
    </body>

小提琴：https://jsfiddle.net/gknLstpt/4/

來源

2015-07-28 12:56:04

滾動效果起作用，但我在body標記中丟失了標題背景，並且bgimgborder上的背景不再顯示。 – Greg

請與下面的鏈接。將位置固定爲背景和頂部：0px;

https://jsfiddle.net/gknLstpt/5/

<body>

<div class="bgimgborder" style="Position:absolute;top:0px;left:200px;"> 
<img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
<div style="height:80px;"></div> 
<img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 
<div style="height:80px;"></div> 
<img class="imgpadding" border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg" width="700" > 

    </div> 
    </body>

來源

2015-07-28 13:01:29 Steevan

我可能會加入混亂，因爲我的jsfiddle沒有顯示標題。有三個背景設置。酒吧在身體標籤頂部。分割標記中的黑色背景和出現在另一個分割標記中的圖像旁邊的灰色邊框。我希望他們都被修復，只有img標籤滾動。 – Greg

讓圖像向上滾動，同時修復多個背景

回答

相關問題