1、一.background-color,背景颜色，这个属性比较简单，.z1 { background-color: #F00;}当然，也可以这样写，用英文字母代替，.z1 { background-color: red;}完整代码如下;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.z1 { background-color: red;}</style></head><body><div class="z1">我喜欢数学</div></body></html>在浏览器的效果如下图：
2、二：background-image，以图片为背景，代码写法：.z1 { background-image: url(../Pictures/DNF/300.jpg);}url(../Pictures/DNF/300.jpg)表示图片的路径。
3、三:background-repeat,这个属性定义了图像的平铺模式，其中他有四个属性值，repeat-x：背景图像将在水平方向重复。repeat-y：背景图像将在垂直方向重复。no-repeat：背景图像将在垂直方向重复。repeat:默认。背景图像将在垂直方向和水平.代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body { background-image: url(../Pictures/DNF/901.png); height: 100%; width: 100%; font-size: 18px; color: #F00; background-repeat: repeat-y;}</style></head><body><p>我喜欢吃橘子</p></body></html>
4、repeat-x：如图:
5、repeat-y：如图:
6、no-repeat：如图:
7、repeat:默认,如图:
8、四.background-attachment:属性设置背景图像是否固定或者随着页面的其余部分滚动,fixed,当页面的其余部分滚动时，背景图像不会移动。scroll,默认值。背景图像会随着页面其余部分的滚动而移动。inherit,规定应该从父元素继承 background-attachment 属性的设置.
9、五.background-position,设置背景图像的起始位置。body { background-image: url(../Pictures/DNF/901.png); background-repeat: no-repeat; background-position: 50px 50px;}background-position: 50px 50px;表示背景图像离水平距离50px，垂直距离50px的位置。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body { background-image: url(../Pictures/DNF/901.png); height: 100%; width: 100%; font-size: 18px; color: #F00; background-repeat: no-repeat; background-position: 50px 50px;}</style></head><body><p>我喜欢吃橘子</p></body></html>
