Question

我正在尝试使用记事本背景创建一个textarea（像这样：http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/）但是我遇到了同样的问题，当文本转到超过高度的多行时是能够滚动，背景不会滚动，所以只有文本浮动在所有行上它看起来很糟糕。有什么方法可以让背景随着文本的移动而移动，看起来就像真正的纸上书写一样吗？

Answer 1

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

它使用滚动位置重新排列背景y位置。

http://jsfiddle.net/WTCUK/

Answer 2

也许：

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

使用文本滚动的背景样式Textarea？

2 个答案: