Question

如何使背景图像保持静止并仅滚动文本？

#wrapper{
    height: 100%;
    width: 100%;
    background-image: url('background.jpg');
    background-size: 100%;
    background-position: fixed;
}

这是我对背景的造型，但它仍然滚动，在文本到达底部之前留下下方的空白区域。我现在一直在谷歌上搜索一个小时。这是我第一次尝试使用CSS，所以请不要苛刻我。

Answer 1

<style>
        #test { 
            background-image: url(./images/grad.gif); 
            background-attachment: fixed; 

            /* 
              the three following items below do the following: 
                a) fix the width and height of the containing div
                   to be smaller than the width and height of the content.
                b) we set the overflow style so that when the content is
                   bigger than the containing element scroll bars appear
                   to allow users to scroll the element contents. 
            */
            height:200px; 
            width:300px; 
            overflow:scroll; }    
    </style>

    <div id="test">
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       <div style="border:3px solid white; margin:20px; width:80%">
       test test test test test test test test test <br/>
       test test test test test test test test test <br/>
       test test test test test test test test test <br/>
       test test test test test test test test test <br/>
       </div>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>
       test test test test test test test test test test test <br/>


    </div>

更多信息：http://www.codertools.com/css_help_guide/css_background-attachment.aspx

Answer 2

使用

background-attachment: fixed;

http://www.w3.org/TR/CSS21/colors.html#background-properties

使用background-attachment代替background-position。

See demo

Answer 3

我相信背景附件：已修复应解决问题。当然，这不是一个真正的信仰问题，但MDN似乎这样说。

Answer 4

我认为这与位置属性有关，您的文本是否也包含在包装器中？

您可以参考这个并获得更清晰的图片： Difference between style = "position:absolute" and style = "position:relative"

Answer 5

使用此CSS代替，以防止图像平铺，并使文本滚动它：

background: url('your_background.jpg') no-repeat fixed;

在静态图像css上滚动文本

5 个答案: