CSS バックグラウンド(背景)

CSS背景属性用于定义元素的背景样式。CSS 背景这里指通过CSS对对象设置背景属性，如通过CSS设置背景各种样式。

背景属性

CSS样式为一个元素的背景提供若干属性，如：background-color、background-image、background-repeat、background-attachmentおよびbackground-position。下一节将介绍如何使用这些属性为背景一一设置不同的样式。

背景颜色

background-color属性用于设置元素的背景色。

以下示例演示如何设置网页的背景色。

body　{background-color:　#f0e68c;}

CSS中的颜色通常由以下方法指定：

• 十六进制值-例如“#ff0000”

• RGB值-例如“ rgb（255,0,0）

• 颜色名称-如“红色”

查看CSS颜色名称以获取可能颜色名称的完整列表。

背景图像

background-image属性将图像设置为HTML元素的背景。

以下示例演示如何设置页面的背景图像。

body　{background-image:　url("leaf.jpg");

背景重复

默认情况下，该background-image属性在水平和垂直方向上都重复图像。

通过使用background-repeat属性，您可以控制如何在HTML元素的背景中平铺背景图像。您可以设置垂直（y轴），水平（x轴），双向或双向重复的背景图像。

以下示例演示了如何通过水平重复切片的图像来设置网页的渐变背景。

body　{
　　　　background-image:　url("gradient.png");
　　　　background-repeat:　repeat-x;
　　　　}

背景附件

background-attachment属性确定背景图像相对于视口是固定的还是随包含块一起滚动。

body　{
　　　　width:　250px;
　　　　height:　200px;
　　　　overflow:　scroll;
　　　　background-image:　url("recycle.jpg");
　　　　background-attachment:　fixed;
　　　　}

背景位置

background-position属性は背景画像の位置を制御するために使用されます。

指定されていない場合background-position指定されると、画像は要素のデフォルトの左上位置、すなわち(0,0)。以下の例を参照してください：

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　}

以下の例では、背景画像は右上方に配置されており、画像の位置は以下で指定されています。background-position属性で指定されます。

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　background-position:　100%　top;
　　　　}

背景属性ショートカット

上記の例からわかるように、背景を処理する際には多くの属性を考慮する必要があります。これらすべての属性を一つの属性で指定することもできます。これをショートカット属性と呼びます。

のbackground属性は、すべての個々の背景属性（つまり、略記法属性）を設定するために使用されます。background-color、background-image、background-repeat、background-attachmentおよびbackground-position）一度。例えば：

body　{
　　　　background-color:　#f0e68c;
　　　　background-image:　url("smiley.png");
　　　　background-repeat:　no-repeat;
　　　　background-attachment:　fixed;
　　　　background-position:　250px　25px;
　　　　}

短縮記法を使用すると、上記の例は以下のように書ける：

body　{background:　#f0e68c　url("smiley.png")　no-repeat　fixed　250px　25px;}

使用background簡略属性を使用する場合、属性値の順序は以下の通りです。

背景：彩色 画像 繰り返し 付属 位置 ;

短縮記法を使用して個々の背景属性の値が欠けているか、指定されていない場合、その属性のデフォルト値（あれば）が使用されます。