CSS 背景ガイド

著者：Eve Cole 更新時間：2009-09-23 17:51:14

元のリンク: CSS の背景: 知っておくべきことすべて
翻訳リンク: CSS バックグラウンドガイド

転載する場合は著作権とリンクを保持してください

背景は CSS の重要な部分であり、知っておく必要がある CSS の基本知識の 1 つです。この記事では、background-attachment などの属性を含む css 背景 (background) の基本的な使い方を説明するとともに、背景 (background) に関する一般的なテクニックと css3 (4 つを含む) の背景 (background) についても紹介します。新しい背景プロパティ)。

css2の背景

概要

CSS2 には、次の 5 つの主要な背景プロパティがあります。

背景色: 背景を塗りつぶす色を指定します。
背景画像: 背景としての参照画像。
背景位置: 要素の背景画像の位置を指定します。
background-repeat: 背景画像を繰り返すかどうかを決定します。
背景添付: 背景画像がページとともにスクロールするかどうかを決定します。

これらのプロパティはすべて、背景という 1 つの短縮プロパティに結合できます。注意すべき重要な点の 1 つは、背景がパディングや境界線を含む要素のコンテンツ領域のすべてを占めるが、要素のマージンは含まれないということです。 Firefox、Safari、Opera、IE8 では正常に動作しますが、IE6 と IE7 では背景に枠線が含まれません。

基本特性

背景色

背景色プロパティは、背景を単色で塗りつぶします。この色を指定するにはさまざまな方法がありますが、次の方法はすべて同じ結果をもたらします。

背景色: 青;
背景色: rgb(0, 0, 255);
背景色: #0000ff;

背景色を透明に設定すると、その下の要素が見えるようになります。

背景画像

背景画像属性を使用すると、背景に表示する画像を指定できます。背景色と組み合わせて使用できるため、画像が繰り返されない場合、画像で覆われていない領域は背景色で塗りつぶされます。コードは非常に単純です。パスはスタイルシートに対する相対パスであることに注意してください。そのため、次のコードでは、画像とスタイルシートが同じディレクトリにあります。

背景画像: url(image.jpg);

ただし、画像がimagesというサブディレクトリにある場合は、次のようにする必要があります。

背景画像: url(images/image.jpg);