0

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

4

2 回答 2

1

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

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

http://jsfiddle.net/WTCUK/

于 2012-10-08T23:40:32.360 回答
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>
于 2012-10-08T23:49:16.607 回答