在静态图像上滚动文本css

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应该可以解决这个问题。当然，这不是真正的信念问题，但MDN似乎这样说。

Answer 3

使用

background-attachment: fixed; 

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

使用background-attachment，而不是background-position。

See demo

Answer 4

我想，这已经得到了更多地与位置属性， 是您的文字也包含在包装？

也许你可以参考这一点，并获得更清晰的画面： Difference between style = "position:absolute" and style = "position:relative"

Answer 5

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

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