CSS 背景

CSS 背景

HTML的背景可以使用CSS的背景属性来表示, 有下面几种效果:

background-position
background-attachment
background-repeat
background-image
background-color

CSS样式的背景颜色怎么表示呢?

背景颜色可以用background-color来定义。
举例说明，我们设置段落选择器的背景颜色:

p{background-color:#AAAAAA;}

那么颜色值在CSS中可以怎么定义呢?

我们通常用下面的这些方式定义颜色:

颜色名称 - 如："green"
RGB - 如："rgb(0,255,0)"
十六进制 - 如："#aaaaaa"

举例说明, 讲div,h1,p元素设置成不相同的颜色:

div {background-color:#aaaaaa;}
h1 {background-color:#bbbbbb;}
p {background-color:#cccccc;}

那么怎样在CSS中设置背景图像呢?

我们通常使用background-image属性来表示背景图片。
距离说明:

body {background-image:url('test.gif');}

怎么设置背景图像的平铺方式呢？

CSS中有多种种平铺方式，默认情况会水平或者垂直方向平铺。
如果只想在水平方向平铺可以这么设置：

p
{
	background-repeat:repeat-x;
	background-image:url('test.png');
}

如何设置背景图片的固定位置或者不平铺呢?

举例说明，如果你想设置图片不平铺，可以使用background-repeat:

p
{
	background-repeat:no-repeat;
	background-image:url('test.png');
}

如果你想设置图片的位置，可以使用background-position, 举例说明:

p
{
	background-position:left top;
	background-repeat:no-repeat;
	background-image:url('test.png');
}

那么背景图片的简写属性是什么呢?

我们通常使用background来简写背景颜色的属性。

举例说明:

p{background:#aaaaaa url('test.png') no-repeat left top;}

简写属性值的顺序为:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position