CSS背景

CSS background-color 属性

背景色与前景色对应,可以定义背景的颜色.

示例

body 
{
	background-color:green;
}

CSS background-image 属性

示例

body 
{
	background-image:url('html_table.png');
}
p 
{
	background-image:none;
}
div 
{
	background-image:url('list-orange.png');
}

定义网页的背景图片为html_table.png,段落p不使用背景图片,div使用list-orange.png.

 

CSS background-repeat 属性

示例

body 
{ 
	background-image:url('list-orange.png');
	background-repeat:no-repeat;
}
div
{
	background-image:url('list-orange.png');
	background-repeat:repeat-y;
	background-position:right;
}

屏幕左上角显示一个橙色点,div的右侧显示一系列橙色点.

CSS background-position 属性

示例

body 
{ 
	background-image:url('list-orange.png');
	background-repeat:no-repeat;
}

p 
{ 
	background-image:url('list-orange.png');
	background-position:right bottom ;
	background-repeat:no-repeat;
}

div 
{ 
	background-image:url('list-orange.png');
	background-position:50% 20% ;
	background-repeat:no-repeat;
}

屏幕左上角显示一个橙色点.p段落的左下角显示一个橙色点.div中间偏上显示一个橙色点.

说明

background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.

例如:

<percentage> <percentage>

左上角为0%, 0%. 右下角为100%, 100%.例如58%,56%就是从左上角算起,右移58%,下移56%.

<length> <length>

6cm 8cm,从左上角算起,右移6cm,下移8cm.

下面是一些等式:

• top left, left top 等价于 0% 0%.
• top, top center, center top 等价于 50% 0%.
• right top, top right 等价于 100% 0%.
• left, left center, center left 等价于 0% 50%.
• center, center center 等价于 50% 50%.
• right, right center, center right 等价于 100% 50%.
• bottom left, left bottom 等价于 0% 100%.
• bottom, bottom center, center bottom 等价于 50% 100%.
• bottom right, right bottom 等价于 100% 100%.

CSS background-attachment 属性

示例

body 
{
	background-image:url('list-orange.png');
	background-attachment:fixed;
	background-repeat:repeat-x;
	background-position:center center;
}

屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.

CSS background 属性

说明:

前面的讲的五个背景属性完全可以使用background属性代替.

示例

body 
{
	background:transparent url('list-orange.png') repeat-x scroll center center;
}

使用background解决所有问题.

body 
{
	background:url('list-orange.png') repeat-x scroll center center;
}

由于背景颜色background-color的默认值为transparent,所以可以省略,这个例子和上面的例子是等价的.

body 
{
	background:url('list-orange.png') repeat-x center;
}

由于背景图片随滚动轴的移动方式background-attachment的默认值为scroll,所以可以省略,背景图片的位置background-position中的属性值center center等价于center,这个例子和上面的例子也是等价的.