让图像向上滚动，同时固定多个背景

Question

我希望三个背景保持固定，同时图像向上滚动，留下背景 header 和其他背景。使用下面的代码，它只是向下滚动，丢失页面上的背景图像。

编辑：我已经更新了 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>

Answer 1

尝试从 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>

Fiddle:https://jsfiddle.net/gknLstpt/4/

Answer 2

检查以下 link。固定背景位置 top: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>

Answer 3

Background-position: fixed 将背景与其容器相关联，但不会阻止容器本身移动。得到例如a header 要始终留在同一个地方，请将 position: fixed 添加到 header 本身。 http://www.w3schools.com/css/css_positioning.asp

让图像向上滚动，同时固定多个背景

Let images scroll up while multiple backgrounds are fixed

css

background