在靜態圖像上滾動文本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;