0

メモ帳の背景を持つテキストエリアを作成しようとしています（例：http ：//www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/ ）が、テキストが高さを超えて複数行に移動し、スクロールできる場合の同じ問題は、背景が一緒にスクロールしないため、テキストだけがすべての行に浮かんでいると見栄えが悪くなります。テキストがスクロールして実際に紙に書いているように見えるときに、背景をテキストと一緒に移動させる方法はありますか？

4

2 に答える 2

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 に答える
1

CSSのみの方法があるかどうかはわかりません。これがjQueryを使用する方法です。

背景のy位置をスクロール位置に再調整します。

http://jsfiddle.net/WTCUK/

于 2012-10-08T23:40:32.360 に答える