Web デザインにおいて、背景の設定は非常に基本的なスキルです。 HTML では、単色の背景、画像の背景、繰り返しの背景、タイル状の背景、グラデーションの背景など、さまざまな方法でページの背景を設定できます。以下では、これらのメソッドを使用して HTML ページの背景を設定する方法を紹介します。
単色背景
単色背景は最もシンプルな背景タイプで、HTMLの背景色属性を設定するだけで済みます。例:
<body style="background-color: #f2f2f2;">
#f2f2f2 は、ライト グレーを表す 16 進数のカラー コードです。その他のカラーコードは、https://htmlcolorcodes.com/ でご覧いただけます。
画像の背景
HTMLでは、ページの背景として画像を使用できます。 img タグを直接使用してこれを実現することもできますが、これを行うとページの読み込み速度に影響する可能性があるため、CSS を使用して背景画像を設定することをお勧めします。例:
<body style="background-image: url('image.jpg');">
ここで、image.jpg は背景として設定する画像です。画像は HTML ファイルと同じディレクトリに配置する必要があることに注意してください。相対パスまたは絶対パスを使用して画像の場所を指定できます。また、次のコードのような他の属性を追加して、画像の位置を中央に配置し、繰り返さないように設定することもできます。
<body style="background: url('image.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">ここの cover 属性は、ページ サイズに合わせて画像サイズを自動的に調整します。画像を引き伸ばしたり変形させたくない場合は、cover の代わりに contains を使用できます。
背景の繰り返し
背景の繰り返しを設定すると、小さな画像を連続して並べてページ全体を埋めることができるため、画像サイズが小さくなり、ページ速度が向上します。 CSS では、repeat、repeat-x、またはrepeat-yを使用して、画像の繰り返し方法を設定します。例:
<body style="background-image: url('image.jpg'); background-repeat: repeat-y;">
タイル背景
タイル背景を使用すると、ページの背景全体を埋めるまで画像や色を並べて表示できます。 CSS では、background-size プロパティとbackground-position プロパティを使用して、画像または色の位置とサイズを制御します。例:
<body style="background-image: url('image.jpg');
background-position: center top;
background-size: auto 100%;
background-repeat: no-repeat;">auto と 100% は、幅を自動的に調整することを意味し、高さは 100% です。
グラデーション背景
グラデーション背景を使用すると、ページをよりファッショナブルに見せることができます。 CSS では、linear-gradient または Radial-gradient を使用して、フラットまたは放射状のグラデーションを作成できます。例:
<body style="background: linear-gradient(to right, #f2f2f2, #ffffff);">
To right は、グラデーションの方向が左から右であることを示すためにここで使用されます。#f2f2f2 と #ffffff は開始点と終了点の色の値です。
概要
HTML ページの背景を設定するには、単色の背景、画像の背景、繰り返しの背景、タイル状の背景、グラデーション背景など、さまざまな方法があります。これらの方法を通じて、Web サイトにさまざまなスタイルや機能を追加できます。
以上がHTMLで背景を設定するにはどうすればよいですか?さまざまな手法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
