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>