Question

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

编辑：我已经在分区标签上更新了固定位置的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

尝试从class="bgimg-paisley"移除div并将其添加到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/

Answer 2

请查看以下链接。使位置固定为背景和顶部：0px;

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

1->2->3

<body>

Answer 3

Background-position: fixed将背景与其容器相关联，但不会阻止容器移动。得到例如要始终保持在同一位置的标头，请将position: fixed添加到标头本身。 http://www.w3schools.com/css/css_positioning.asp

让图像向上滚动，同时修复多个背景

3 个答案: