コンテンツ
HTMLでWebページの背景を設定できるようにするには、内の「body」要素に小さな変更を加えるだけです。 スタイル> /スタイル> タグ。手順は、壁紙をどのように表示するかによって異なります。 Webサイトの背景を単色、画像、グラデーション、またはカラーアニメーションとして設定する方法を学びます。
ステップに
方法1/4：無地の背景色を設定する
お気に入りのテキストエディタでHTMLファイルを開きます。 HTML5以降、HTML属性bgcolor>はサポートされなくなりました。ページの他のすべてのスタイルの側面と同様に、背景色はCSSで設定する必要があります。 
追加します スタイル> /スタイル> ドキュメントにタグを付けます。 ページのすべてのスタイルデータ（背景色を含む）は、これらのタグ内でエンコードする必要があります。あなたは持っていますか スタイル> タグがすでに示されている場合は、ファイルのその部分までスクロールできます。 ！DOCTYPE html> html>ヘッド>スタイル> /スタイル> /ヘッド> / html>
内に「body」要素を入力します スタイル> /スタイル> タグ。 CSSの「body」要素に変更を加えると、ページ全体に影響します。 ！DOCTYPE html> html>ヘッド>スタイル>ボディ{} /スタイル> /ヘッド>ボディ> /ボディ> / html>
「body」要素に「background-color」プロパティを追加します。 このコンテキストでは、「色」の1つのスペルのみが機能します（色ではありません）。 ！DOCTYPE html> html> head> style> body {background-color：} / style> / head> body> / body> / html>
「background-color」の後ろに希望の背景色を配置します。 色の名前を指定できるようになりました（緑, 青, edなど）、16進（16進）コードを使用します（例： #000000 黒の場合、 ＃ff0000 赤などの場合）または色のRGB値を入力する（など） rgb（255,255,0） 黄色の場合）。以下は、16進コードの例で、背景をwikiHowバナーと同じにします。 ！DOCTYPE html> html> head> style> body {background-color：＃93B874; } /スタイル> /ヘッド>ボディ> /ボディ> / html>
- 白い： #FFFFFF
- ライトピンク： ＃FFCCE6
- 焦げたシェンナ： #993300
- インディゴ- ＃4B0082
- バイオレット- ＃EE82EE
- w3schools.com HTMLカラーピッカーをチェックして、必要な色の16進コードを見つけてください。
「background-color」を使用して、他の要素に背景色を適用します。 body要素を設定するのと同じように、background-colorを使用して他の要素の背景を設定できます。それらの要素を内に配置するだけです スタイル> /スタイル> background-colorプロパティを使用します。 ！DOCTYPE html> html> head> style> body {background-color：＃93B874; } h1 {背景色：オレンジ; } p {背景色：rgb（255,0,0）; } / style> / head> body> h1>このヘッダーはオレンジ色の背景になります/ h1> p>この段落は赤い背景になります/ p> / body> / html>
方法2/4：画像を背景として使用する
HTMLファイルをテキストエディタで開きます。 多くの人々は彼らのウェブサイトの背景として画像を使用することを好みます。これを使用すると、背景としてパターン、テクスチャ、写真、またはその他の画像を設定できます。 HTML5以降、すべての背景はCSS（Cascading Style Sheets）で設定する必要があります。 スタイル> /スタイル> タグ。 
追加します スタイル> /スタイル> HTMLファイルへのタグ。 ページのすべてのスタイルデータ（背景色を含む）は、これらのタグ内に示す必要があります。もうお持ちですか スタイル> タグを設定し、ファイルのその部分までスクロールします。 ！DOCTYPE html> html>ヘッド>スタイル> /スタイル> /ヘッド> / html>
内に「body」要素を入力します スタイル> /スタイル> タグ。 CSSの「body」要素に変更を加えると、ページ全体に影響します。 ！DOCTYPE html> html>ヘッド>スタイル>ボディ{} /スタイル> /ヘッド>ボディ> /ボディ> / html>
「body」要素に「background-image」プロパティを追加します。 このプロパティを追加するときは、画像のファイル名が必要になります。画像がhtmlファイルと同じフォルダに保存されていることを確認してください（またはファイルへのフルパスをWebサーバーに追加してください）。 ！DOCTYPE html> html> head> style> body {background-image：url（ "imagename.png"）;背景色：＃93B874; } /スタイル> /ヘッド>ボディ> /ボディ> / html>
- コードを含めることをお勧めします 背景色 背景画像が読み込まれない場合に備えて。
複数の画像を重ねます。 複数の画像を積み重ねることができます。これは、背景が透明で、重ね合わせたときに互いに補完し合う画像がある場合に役立ちます。 ！DOCTYPE html> html> head> style> body {background-image：url（ "image1.png"）、url（ "image2.gif"）;背景色：＃93B874; } /スタイル> /ヘッド>ボディ> /ボディ> / html>
- 最初の画像が上にあります。 2番目の画像は最初の画像の下にあります。
方法3/4：グラデーションの背景を作成する
CSSを使用してグラデーションの背景を作成します。 単色よりも少し様式化されているが、カラーアニメーションほど忙しくないものを探している場合は、グラデーションの背景を試してください。グラデーションは、他の等式に変化する色です。 CSSを使用して、グラデーションを作成および調整できます。色のグラデーションの作成を開始する前に、CSSを使用してWebページをフォーマットする基本について十分な知識を習得する必要があります。 
標準の構文を理解します。 グラデーションを作成するときは、開始点と開始角度、および遷移が発生する色の2つの情報が必要になります。すべてが重なる複数の色を選択したり、グラデーションの方向や角度を指定したりできます。 背景：線形グラデーション（方向/角度、color1、color2、color3など）;
垂直方向のグラデーションを作成します。 方向を指定しない場合、色は上から下に流れます。ブラウザーごとにグラデーション関数のバージョンが異なるため、コードのバージョンを追加する必要があります。 ！DOCTYPE html> html> head> style> html {min-height：100％; / *これは、グラデーションがページ全体に広がるようにするために必要です * /} body {background：-webkit-linear-gradient（＃93B874、＃C9DCB9）; / * Chrome 10以降、Safari 5.1以降 * /背景：-o-linear-gradient（＃93B874、＃C9DCB9）; / * Opera 11.1+ * /背景：-moz-linear-gradient（＃93B874、＃C9DCB9）; / * Firefox 3.6+ * /背景：線形グラデーション（＃93B874、＃C9DCB9）; / *デフォルトの構文（最後である必要があります） * / background-color：＃93B874; / *グラデーションが読み込まれない場合に備えて、背景色を設定することをお勧めします * /} / style> / head> body> / body> / html>
方向のあるグラデーションを作成します。 グラデーションに方向を追加すると、色の変化の仕方を調整できます。ブラウザが異なれば、方向の解釈も異なることに注意してください。それらはすべて同じ色のグラデーションを示します。 ！DOCTYPE html> html> head> style> html {min-height：100％; } body {background：-webkit-linear-gradient（left、＃93B874、＃C9DCB9）; / *左から右へ * /背景：-o-linear-gradient（right、＃93B874、＃C9DCB9）; / *右側で終了 * /背景：-moz-linear-gradient（right、＃93B874、＃C9DCB9）; / *右側で終了 * /背景：線形グラデーション（右側、＃93B874、＃C9DCB9）; / *右側に移動します * / background-color：＃93B874; / *グラデーションが読み込まれない場合に備えて、背景色を設定することをお勧めします * /} / style> / head> body> / body> / html>
他のプロパティを使用してグラデーションを調整します。 グラデーションを使用すると、さらに多くのことができます。 - たとえば、3つ以上の色を使用できるだけでなく、それぞれの後ろにパーセンテージを配置することもできます。これにより、各カラーセグメントが取得するスペースの量を示すことができます。
背景：線形グラデーション（＃93B874 10％、＃C9DCB9 70％、＃000000 90％）;
- 色に透明度を追加します。これで色を薄くすることができます。同じ色を使用して、色からゼロにフェードインします。あなたは機能を気に入るはずです rgba（） 色を示すために使用する必要があります。最終値は、透明度を決定します。 0 不透明で 1 透明のために。
背景：線形グラデーション（右、rgba（147,184,116.0）、rgba（147,184,116.1））;
- たとえば、3つ以上の色を使用できるだけでなく、それぞれの後ろにパーセンテージを配置することもできます。これにより、各カラーセグメントが取得するスペースの量を示すことができます。
方法4/4：壁紙としてカラーアニメーションを設定する
案内する スタイル> HTMLコードで。 単色の背景色が見つかったが見つからない場合は、背景色を変更してみてください。 HTML 5から、背景色はCSS（Cascading Style Sheets）で定義する必要があります。 CSSで背景色を設定したことがない場合は、この方法を試す前に、単色の背景色の設定に関するセクションをお読みください。 
プロパティを追加します アニメーション 「body」要素に。 ブラウザごとに異なるコードが必要なため、2つの異なるプロパティを追加する必要があります。 ！DOCTYPE html> html> head> style> body {-webkit-animation：colorchange 60s infinite;アニメーション：60年代の色の変化は無限大。 } /スタイル> /ヘッド>ボディ> /ボディ> / html>
- -webkit-アニメーション このプロパティは、Chromeベースのブラウザ（Chrome、Opera、Safari）に必要です。 アニメーション 他のすべてのブラウザの標準です。
- 色変更 この例では、アニメーションと呼ばれるものです。
- 60年代 アニメーション/トランジションの継続時間（60秒）です。これは、Webkitとデフォルトの構文の両方に必ず設定してください。
- 無限 アニメーションが無期限に繰り返される必要があることを示します。色をループして最後の色で停止する場合は、この部分を省略できます。
アニメーションに色を追加します。 次に、@ keyframesルールを使用して、通過する背景色と、各色がページに表示される時間の長さを設定します。繰り返しになりますが、さまざまなブラウザに複数のエンコーディングを追加する必要があります。 ！DOCTYPE html> html> head> style> body {-webkit-animation：colorchange 60s infinite;アニメーション：60年代の色の変化は無限大。 } @ -webkit-keyframes colorchange {0％{background：＃33FFF3;} 25％{background：＃78281F;} 50％{background：＃117A65;} 75％{background：＃DC7633;} 100％{background：＃ 9B59B6;}} @keyframes colorchange {0％{background：＃33FFF3;} 25％{background：＃78281F;} 50％{background：＃117A65;} 75％{background：＃DC7633;} 100％{background：＃ 9B59B6;}} /スタイル> /ヘッド>ボディ> /ボディ> / html>
- 2行（@ -webkit-keyframes そして @keyframes 背景色とパーセンテージに同じ値があります。すべてのブラウザでエクスペリエンスが同じになるように、均一なままにする必要があります。
- パーセンテージ（0%, 25%など）は、アニメーションの合計期間を表します（60年代）。ページが読み込まれると、背景の色がに設定されます 0% および（＃33FFF3）。アニメーションの25％または60秒が再生されると、背景はに移行します ＃78281F、 等々。
- 必要に応じて、期間と色を調整できます。
