在静态图像css上滚动文本

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

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

---

这是我的背景样式，但它仍然会滚动，在下面留下空白，直到文本到达底部。我已经在谷歌上搜索了一个小时了。这是我第一次尝试使用css，所以请不要对我苛刻。

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

<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>

#测试{
背景图像：url（./images/grad.gif）；
背景附件：固定；
/* 
以下三项功能如下：
a） 固定包含div的宽度和高度
小于内容的宽度和高度。
b） 我们设置溢出样式，以便在
显示大于包含元素的滚动条
允许用户滚动元素内容。
*/
高度：200px；
宽度：300px；
溢出：滚动；}
测试测试测试

测试测试测试

测试测试测试

测试测试测试

测试测试

测试测试

测试测试

测试测试

测试测试测试

测试测试测试

测试测试测试

测试测试测试

更多信息：

使用

background-attachment: fixed;

使用

背景附件

代替

背景位置

---

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

您可以参考此内容，获得更清晰的图像：

---

使用此CSS，以防止图像平铺，并使文本在其上滚动：

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

---

溢出：滚动；在我的案例中，添加上述内容已经解决了这个问题。谢谢！