テクスチャの行をメモ帳のように見せるにはどうすればいいですか？

テキストエリアに行を表示して、メモ帳のように見せる必要があります。テキストエリアは1つしかありません。以下のメモ欄は参照用です。要するにhttp://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/テクスチャの行をメモ帳のように見せるにはどうすればいいですか？

：background-imageを設定し、画像を使用しているものは何でもラインの高さにline-heightを設定

enter image description here

出典

2012-02-15 Anshul

■は{ 背景：#FFFFFFのURL（image.gif）ノー・リピート左; text-align：center; } お試しください –

は、ここで考えです。

出典

2012-02-15 08:07:37 Simon

画像を正確に取得する必要があります。いくつかの行の後には、他の例がブレークを投稿しています。スクロールバーがあるとすぐにあなたが投稿した例が表示されます。 – DisgruntledGoat

それを壊さないようにすることは、間違いなくここでの挑戦です。私はこれを自分で試したことはありませんが、20pxの高さの画像を作成し、それを背景画像として繰り返し、ラインの高さを20pxに設定することは、整列する必要があると思われます。コンテンツ内の大きすぎる 'インラインブロック 'から遠ざかって、線の高さを数ピクセル下にシフトさせる可能性もあると思います。 – Simon

スクロールするときに背景も移動する必要があります。それ以外の場合は、半分の行をスクロールすることができ、テキストは行間ではなく、行間にあります。 – DisgruntledGoat

これは、あなたが始める必要があります。

HTML

<textarea class="text">some text</textarea>

CSS

.text { 
    background: url(http://i.stack.imgur.com/UfzKa.jpg); 
    height: 664px; 
    width: 495px; 
    line-height: 29px; 
    padding-top: 136px; 
    padding-left: 120px; 
}

デモhttp://jsfiddle.net/ptpgb/4/

出典

2012-02-15 08:08:23 PiTheNumber

なぜですか？背景画像を使用してください、それはそのためにあります！ –

ヒントをありがとう。背景は良い、ダウン投票の必要はありません... – PiTheNumber

Downvoteが削除されました。 downvotesを恐れてはいけない、あなたが改善するのに役立つ建設的なコメントと考えてください。あなたの答えが役に立たない/間違っていないなら、あなたは下降投票され、それが通知されます。だから、私がダウンボトムしたときに私はいつもコメントを残すのです。ハッピー編集！ –

を追加しますCSSを介した背景画像が機能するはずです。

textarea{ background-image:url(notepad.png); color:ff0000; }

look at here

出典

2012-02-15 08:08:35 CyrillC

あなたは、あなたのイメージに基づいて、CSSスタイルでこれを行うことができ、あなたはこれを行うことができます。

textarea#area { 
    width: 300px; 
    height: 400px; 
    padding: 0 0 0 20px; 
    line-height: 30px; 
    background: #fff url("http://i.stack.imgur.com/UfzKa.jpg") no-repeat -75px -160px 
}

例ここfiddle

出典

2012-02-15 08:08:50 epoch

画像全体を見ることができれば、より良く見えます：http://stackoverflow.com/a/9289821/956397 – PiTheNumber

のように、このいずれかを試してみてくださいを参照してください。よく

<style type="text/css"> 
textarea { 
background: url(/source/notebook.png) repeat-y; 
width: 600px; 
height: 300px; 
font: normal 14px verdana; 
line-height: 25px; 
padding: 2px 10px; 
border: solid 1px #ddd; 
} 

</style>

これが役に立ちます。

出典

2012-02-15 08:10:50

これはSimonのリンクの正確なコピーです。 – epoch

同時に私たちは両方ともリンクを打つかもしれません。私は最初にそれが働いているのを試みた後、ここに投稿しました。 –

確かに、私は悪い意図でそれを言っていない、ちょうど言っていた:) – epoch

あなたが試す確認することができ

<textarea class="notepad"></textarea> 

.notepad { 
background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y; 
width: 600px; 
height: 300px; 
font: normal 14px verdana; 
line-height: 25px; 
padding: 2px 10px; 
border: solid 1px #ddd; 
}

http://jsfiddle.net/FzFaq/1/

出典

2012-02-15 08:14:33

テクスチャの行をメモ帳のように見せるにはどうすればいいですか？

答えて

関連する問題