在 CSS 中常见的背景 (background) 属性有以下几种：
background-color
background-image
background-repeat
background-attachment
background-position
每一个属性在以下会有详细地介绍：
background-color
background-color 属性是用来指定背景的颜色。
| css样式 | 效果 |
| p {background-color: 00FF00;} | 绿色背景 |
| p {background-color: red;} | 红色背景 |
background-image
background-image 属性是用来指定用什么图案来当做背景。
| css样式 | 效果 |
| p {background-image:url(yp.jpg);} | 有背景图案，yp.jpg为图片全路径 |
background-repeat
background-repeat 属性是用来指定背景图案重不重複。预设值是 "repeat"，代表此背景图案将在 x- 及 y-方向都会重覆。其他的值为 x-repeat (x-方向重复)、y-repeat (y-方向重复)、以及 no-repeat (不重复)。
举例如下：
| css样式 | 效果 |
p { background-image:url(yp.jpg); background-repeat: no-repeat; } | 背景图案不重复 |
p { background-image:url(yp.jpg); background-repeat: repeat-x; } | 背景图案在 x-方向重复 |
p { background-image:url(yp.jpg); background-repeat: repeat-y; } | 背景图案在 y-方向重複。 - |
p { background-image:url(yp.jpg); background-repeat: repeat; } | 背景图案在 x- 及 y-方向重複。 -------------------------------- |
background-attachment
background-attachment 属性是用来指定背景图案是否在萤幕上固定。这个属性可能的值为 "fixed" (当网页卷动时，背景图案固定不动) 以及 "scroll" (当网页卷动时，背景图案会跟著移动)。
以下是两个例子：
背景图案不动
body {background-attachment: fixed;
background-image: url("yp.jpg");
background-repeat: no-repeat;
}背景图案移动
body {background-attachment: scroll;
background-image: url("yp.jpg");
background-repeat: no-repeat;
}background-position
background-position 属性是用来指定背景图案的位置。它的值可以是：
两个字：第一个字为 [top,center,bottom] 中三选一，而第二个字由 [left,center,right] 中三选一。
两个百分比：第一个百分比为 x-轴的百分比，第二个为 y-轴的百分比。
两个数目：第一个数目为 x-轴的位置，第二个数目为 y-轴的位置。
举例如下：
背景图案在中间
body { background-image: url("yp.jpg");
background-repeat: no-repeat;
background-position: center center;
}图案的位置离上面 20% 与离左边 20% 的地方
body { background-image: url("yp.jpg");
background-repeat: no-repeat;
background-position: 20% 20%;
}感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程