10

これは説明するのが少し難しいことは知っていますが、以下のコードを見るとアイデアが得られます。状況は、線の背景を持つテキストエリア (ノートブックのようなもので、画像スタイルが繰り返されます) であり、テキストエリアも次のようになります。たとえば固定高さ。300pxなので、スクローラーが来たらテキストに線を貼り付けたいのですが、テキストがスクロールし、背景の線が固定位置に戻ります..

背景の行をテキストと一緒にスクロールすることは可能ですか?

これが私のhtmlコードです..

<div style="width:500px; height:300px; margin:0px auto; background:#ebebeb;">
<textarea style="width:100%; height:300px; background:url(line.jpg) repeat; line-height:30px; font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif;" name="" cols="" rows=""></textarea>
</div>

ここで画像を見ることができます - { ここに画像の説明を入力}

4

1 に答える 1

23

background-attachment: local;背景画像を設定した後に使用します。

デモ

IE9 以降、Safari 5 以降、Chrome、Opera で動作

Firefox では動作しません。これを参照してください。

HTML :

<div>
    <textarea>
        background-attachment: local;
        <!-- and so on, many more lines -->
        background-attachment: local;
    </textarea>
</div>

CSS :

div {
    width: 500px;
    margin: 0 auto;
    background: #ebebeb;
}
textarea {
    display: block;
    width: 100%;
    height: 300px;
    background: url(http://i.stack.imgur.com/EN81e.jpg);
    background-attachment: local;
    font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}

編集

別のより優れた互換性ソリューション(これが機能しないブラウザーは Opera Mobile と Opera Mini のみ) は、 を使用せずtextarea、別divのcontenteditable属性を使用することです。

デモ

HTML :

<div class='outer'>
    <div class='inner' contenteditable='true'>
        background-attachment: local;
                <!-- more stuff -->
        background-attachment: local;
    </div>
</div>

CSS :

.outer {
    overflow-y: scroll;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    background: #ebebeb;
}
.inner {
    width: 100%;
    min-height: 300px;
    background: url(http://i.stack.imgur.com/EN81e.jpg);
    font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}
于 2012-10-08T23:33:02.803 に答える