CSSで縞模様の背景を作る方法

ビデオ: CSSだけで背景パターン・模様を生成する方法！グラデーションのrepeating（リピーティング。繰り返し）プロパティを使って、様々なパターンを作ってみましょう！

コンテンツ

説明書
説明書
お知らせ

CSSコードを使用すると、グラフィックを使用せずにWebページの縞模様の背景を生成できます。この効果では、複数の色が途切れるCSSグラデーションレベルと、グラデーションベクトルを画面全体で繰り返すためのbackground-sizeプロパティを使用します。これを行う最良の方法は、背景色を無地から始めて、その色をハイライト表示するための透明な縞の1つを作ることです。古いインターネットブラウザを使ってあなたのページにアクセスしたユーザーは単色で表示されます。

説明書

CSSを使用すると、グラフィックを使用せずにWebページ全体の縞模様の背景を生成できます。 （Jack Hollingsworth /フォトディスク/ゲッティイメージズ）

説明書

メモ帳またはコード編集プログラムでCSSスタイルシートファイルを開きます。この規則をファイルの最後に追加します。

html {高さ：100％; }

この規則はそれが作成するグラデーションストライプでWebページの背景全体を塗りつぶすことを可能にします。
ページの背景色を "html {}"内に設定して、ストライプのベースカラーと古いブラウザのデフォルトカラーを指定します。

html {高さ：100％;背景色：黒。 }
次のコードをデフォルトの "html {}"に追加して横縞効果を作成します。

背景画像：線形グラデーション（透明50％、白50％）。

それは2つの色の切れ目を作り出します。1つは透明で、もう1つは白です。各色の途切れは、画面上のグラデーション空間の50％を占めます。パーセント値を変更してストリップの幅を調整します。
最初のカラーブレークにゼロの値を追加し、それをコンマで区切ります。

背景画像：線形グラデーション（０、透明５０％、黒色５０％）。

これは、ストライプを水平に配置するのではなく、垂直に配置します。
background-imageプロパティとその値を新しい行に複製します。これを2回行い、同じコードで3行を作成します。コードの重複行の1つで、 " - moz"接頭辞を線形グラデーションに追加します。もう一方の重複行に "-webkit"プレフィックスを追加します。

背景画像：線形グラデーション（０、透明５０％、白５０％）。背景画像：−ｍｏｚ−線形勾配（０、透明５０％、白色５０％）。 background-image：-webkit-linear-gradient（0、透明50％、白色50％）。
CSSコードの次の行にbackground-sizeを設定して、グラデーションを特定のピクセル数に制限します。

背景サイズ：20px。

背景サイズのピクセル数を変更して、グラデーションサイズを変更します。ページ幅グラデーションの一定の繰り返しにより、各繰り返しは画面上のストライプのセットに対応します。