CSS 背景 背景

CSS には 5 つの主要な背景プロパティがあります。それらは次のとおりです:

background-color: 塗りつぶされた背景の色を指定します。

background-image: 背景として画像を引用します。

background-position: 要素の背景画像の位置を指定します。

background-repeat: 背景画像を繰り返すかどうかを決定します。

background-attachment: 背景画像がページとともにスクロールするかどうかを決定します。

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

Background-color

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

background-color: blue;

background-color: rgb (0, 0, 255);

background-color を透明に設定することもできます。それは見える。

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

background-image: url(image.jpg);

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

background-image: url(images/image.jpg);

Background-repeat背景画像を設定すると、デフォルトで画像は要素全体を覆うように水平方向と垂直方向に並べて表示されます。これは必要なことかもしれませんが、画像を 1 回だけ表示したり、一方向にのみ並べて表示したりしたい場合もあります。可能な設定値と結果は次のとおりです:

background-repeat:repeat; /* デフォルト値、水平および垂直にタイリング */

background-repeat: no-repeat; /* タイリングなし。写真は一度だけ表示されます。 */

background-repeat:repeat-x; /* 水平方向に並べて表示します (x 軸に沿って) */

background-repeat:repeat-y; /* 垂直方向に並べて表示します (y 軸に沿って) */

background-repeat: respect; /* 親要素のbackground-repeat属性を継承します*/

背景の省略属性背景のさまざまな属性を個別に記述するのではなく、1行にまとめることができます毎回出てくる。形式は次のとおりです:

background: «color» «image» «position» «attachment» «repeat»

たとえば、次のステートメントは次のとおりです。

background-color: traditional;

background-image: url (image.jpg);

background-position: 50% 0;

background-repeat:repeat-y;

背景: 透明 URL (image.jpg) 50% 0 スクロールrepeat-y;

また、すべての値を指定する必要はありません。値を省略した場合は、属性のデフォルト値が使用されます。たとえば、上の行は次と同じ効果があります:

background: url (image.jpg) 50% 0repeat-y;