使用随文本滚动的背景设置文本区域的样式？答案

【问题标题】：Styling Textarea with Background that Scrolls with Text?使用随文本滚动的背景设置文本区域的样式？
【发布时间】：2012-10-08 23:21:23
【问题描述】：

我正在尝试创建一个带有记事本背景的文本区域（例如：http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/），但在该示例中我遇到了同样的问题，即当文本超过高度的多行并且能够滚动通过，背景不会随之滚动，所以它看起来很糟糕，只有文本漂浮在所有行上。有什么方法可以让背景随着文本滚动而移动，看起来就像在纸上写的一样？

【问题讨论】：

标签： scroll textarea notepad

【解决方案1】：

也许：

<html>
  <head>
    <style>
      #fake_textarea{
        width:925px; 
        min-height:100%;
        background-repeat: repeat-y;
        background: url(http://www.artsinmotion.net/notebook_paper.jpg);
        padding-left:100px;
        font-family:arial;
      }

      #wrapper{
        width:1025px; 
        height:500px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div id='wrapper'>
      <div id='fake_textarea' contenteditable></div>
    </div>
  </body>
 </html>

【讨论】：

感谢 alcidesqueiroz，成功了！但在 Firefox 中，似乎文本没有换行并继续一行，直到按 Enter 或 Return。我怎样才能让它自动换行？

【解决方案2】：

我不知道是否有纯 CSS 方法。这是使用jQuery的一种方式。

它将背景 y 位置与滚动位置重新对齐。

http://jsfiddle.net/WTCUK/

【讨论】：