打算从今天起实施专题突破，从局部到整体，逐渐搭建起知识框架，这次先来个CSS样式中的背景设置，包括背景颜色/背景图片等，直接上代码：
<html>
<head>
<meta charset="utf-8"/>
<style>
body
{background-color:"pink";
background-image:url(resume/beijing.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}
.back{background:"red" url(resume/li.png) no-repeat right bottom scroll}
.h{background:"yellow" url(resume/li.png) repeat-x bottom}
</style>
</head>
<body>
<div>
<h2 class="h">测试一下</h2>
<ul class="back">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</div>
</body>
</html>代码都很简单，在<style>中定义了两个类back和h，还对<body>标签进行了设置，从其属性的名字上不难看出，分别是设置背景颜色、背景图片、图片是否重复，图像相对于可视区是否固定、图像在背景中的位置等；当然这些属性也可以简写，就如类back中那样，不过要注意顺序，有些浏览器兼容性不好，经常会出现异常。具体的属性值大家可以参考CSS API，里面介绍的很详细。
可以看到，类h中设置图片水平方向重复，因为只有一行，所以其他几个属性显示不出来，可以比较类black，背景色和右下角的图片都显示了出来，需要注意的是当设置了图片在水平方向重复后，那再设置图片的左右位置则无效，但可以规定其上下的位置，在垂直方向类同。
最后在设置图片的位置时可以使用长度值如10px或10cm，也可以使用百分数，正如上方所示，两个50%即可使图片剧中，另外这两种形式也有区别，长度值代表的是图片左上角的位移，如background-position：50px 60 px；表示图片的左上角将在元素内边距区左上角向右50px，向下60px的位置上（相当于只应用于图片）；而百分数表示法则同时应用于元素和图片，是一种相对位移，二者的具体差别大家可以参考API。
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
