ホームページ > 記事 > ウェブフロントエンド > CSSの背景設定
CSS は Web デザインに使用される言語であり、Web ページのスタイルと外観を制御するためによく使用されます。背景は Web ページの最も基本的な要素の 1 つであり、CSS を使用して Web ページの背景を柔軟に設定でき、Web サイトのデザインに無限の可能性をもたらします。この記事ではCSSの背景設定の基礎知識と一般的な使い方を紹介します。
1. CSS 背景の紹介
CSS 背景は、Web ページの背景を設定するために使用できるだけでなく、DIV や BUTTON などの要素の背景を設定するためにも使用できます。 CSSの背景設定には、色、絵、位置、繰り返し、サイズなどのさまざまな属性が含まれており、これらの属性を組み合わせることで、さまざまなスタイルのWebページを作成できます。
2. CSS の背景色の設定
背景色は CSS で最も単純な設定であり、background-color 属性を通じて設定できます。たとえば、Web ページの背景色を白に設定するには、次のコードをスタイル シートに追加できます。
body {
background-color: #ffffff;
}
ここで、#ffffff は の 16 進表現です。白。色は 16 進数のほかに、RGB、RGBA、HSL を使用して表現することもできます。
3. CSS 背景画像設定
背景画像は CSS で最も一般的に使用される背景設定であり、background-image 属性を通じて設定できます。たとえば、Web ページの背景を画像に設定するには、スタイル シートに次のコードを追加します。 url('example.jpg' ) は、設定する画像のパスを表します。背景画像を設定するときは、背景画像ファイルのサイズと形式に注意する必要があります。適切なサイズと可逆圧縮の画像を選択することが最善です。
4.CSS背景位置設定
背景位置とは、要素内の背景画像の位置を指します。これは、background-position プロパティを通じて設定できます。たとえば、Web ページの背景の中央に画像を配置します。
body {
background-image: url('example.jpg');background-position: center;
} より一般的な方法は次のとおりです。座標値を使用します。たとえば、次のコードは、Web ページの背景の上部中央に画像を配置します。 }
5. CSS背景リピート設定
画像サイズが要素サイズより小さい場合、CSS背景リピート設定を使用して要素全体を埋める必要があります。 background-repeat 属性を介して設定できます。たとえば、水平方向と垂直方向の両方にタイル表示するには:
body {
background-image: url('example.jpg');background-repeat:repeat;
}
水平方向のみにタイル表示するように設定することもできます。垂直方向に繰り返すか、繰り返しません。
6. CSS の背景サイズ設定
CSS3 では、background-size 属性が新しく追加され、背景画像の拡大縮小方法を設定するために使用できます。たとえば、背景画像を 100% の幅に拡大縮小します。
body {
background-image: url('example.jpg');
background-size: 100% auto;
}
は次の目的にも使用できます。特定の幅と高さの値を設定するか、cover や contains などのキーワードを使用してさまざまなスケーリング方法を設定します。
7. CSS 背景の透明度設定
背景の透明度は rgba カラー表現を通じて設定できます。アルファ値は透明度を表すために使用され、値の範囲は 0 ~ 1 です。たとえば、Web ページの背景の透明度を 50% に設定します。
body {
background-color: rgba(255, 255, 255, 0.5);
}
以上がCSSの背景設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。