3

ブログでノート用紙を作ろうとしていますが、横線を入れたいと思っていました。css を使用して 1 本の水平線を正常に描画できましたが、それを繰り返す方法が見つからないため、ページ全体を埋めることができます。

ここに私のCSSコードがあります:

.horizontalLines {
 border-bottom: 2px solid #CCCCCC;
 padding-top: 25px;
 width: 100%;
}

このコードでは 1 行しか作成できません。複数の行を作成するにはどうすればよいですか?

4

4 に答える 4

15

別の解決策として、CSS を使用して記述された美しい罫線入りの紙の効果をここで入手できます。

background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

ブラウザのサポート: パターン自体は Firefox 3.6 以降、Chrome、Safari 5.1、Opera 11.10 以降、IE10 以降で動作するはずです。ただし、実装上の制限により、これらのブラウザーでも一部が正しく表示されない場合があります (たとえば、執筆時点では、Gecko は放射状グラデーションで非常にバグがあります)。

于 2013-08-12T09:23:17.013 に答える
3

あなたの方法を使用して、これらの要素を複数挿入する必要があります。それらを単純に繰り返すことはできません。

もう1つの方法は、より適切な方法だと思いますが、水平方向と垂直方向に繰り返す背景画像を使用して、この効果を実現することです。

body {
    background: transparent url(path/filename) repeat 0 0;
}

または、グラデーションを使用できる場合は、nikhita dkslfslg の回答(+1) が役立つ場合があります。

于 2013-08-12T09:22:23.237 に答える
1

どうぞ。

.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");

}

画像を base64 でエンコードするだけで問題なく動作します。

ここでエンコードを試すことができ ます。

于 2016-02-15T20:17:11.973 に答える