水平線を使用して印刷可能なページの空白を埋めるためのCSSレシピ

Question

データベースからプロジェクトの詳細を抽出し、上部にプロジェクトの詳細を印刷するための動的HTMLページを作成します。このページの目的は、プロジェクトに関する情報をチームやその他の会議に記録することです。プロジェクトの詳細が記入された後、スペースに行が表示されるようにしたいと考えています。

ページの空の部分を水平線で塗りつぶすには、どのようなCSS擬似タグまたはCSS関数を使用できますか？

Answer 1

解決策は、aftersusuoタグでcss関数repeated-linear-gradientを使用することです。プロジェクトの詳細を仮定

は、CSSは次が含まれますproject_detailsというクラスを持つ要素である：

.project_details::after { 
    content:   ''; 
    display:   block; 
    width:   100%; 
    height:   29cm; 
    background:  repeating-linear-gradient(0deg,blue 0px, white 1px,white 30px); 
} 

コンテンツ属性が必要とセレクタを使用してにブラウザを強制するために、空の文字列です。 contentプロパティが指定されていない場合、 "after"セレクタはブラウザによって無視されます。

ブロック、表示、および幅は、記入するスペースの物理サイズをブラウザに知らせるために必要です。提供される解決策では、幅はページ幅の100％であり、高さはA4サイズの用紙の高さとほぼ同じである。

バックグラウンドは、1ピクセル幅の青い線と29ピクセルの空白が1つずつ繰り返される線形勾配です。 0degは水平方向の勾配を表します。勾配は、最初のピクセル（ピクセル0）では青から白に変化し、ピクセル1から30ピクセルまで白から白に変化し、繰り返されます。

ザ・は潜在的な落とし穴のカップルです：

1. ブラウザの印刷レンダリングはすべての行が印刷されることを保証するために1ピクセルよりも大きいと線幅が必要になることがあります。
2. 印刷ダイアログでは、デフォルトで「背景グラフィックス」がオフに設定されていて、行を表示するにはオンに切り替える必要があります。