CSS3 background-position属性
这个属性的官方文档语法：
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 10px;
}
.a{
float: left;
height: 300px;width: 300px;
border: 10px dashed rgb(128,177,211);
padding: 20px;
background: url(img/HBuilder.png) no-repeat top left,
url(img/HBuilder.png) no-repeat top center,
url(img/HBuilder.png) no-repeat top right,
url(img/HBuilder.png) no-repeat center left,
url(img/HBuilder.png) no-repeat center center,
url(img/HBuilder.png) no-repeat center right,
url(img/HBuilder.png) no-repeat bottom left,
url(img/HBuilder.png) no-repeat bottom center,
url(img/HBuilder.png) no-repeat bottom right;
background-size: 25%;
}
.b{
float: left;
height: 200px;width: 200px;
border: 10px dashed rgb(128,177,211);
padding: 20px;
background: url(img/HBuilder.png) no-repeat 25% 25%,
url(img/HBuilder.png) no-repeat 10% 90%,
url(img/HBuilder.png) no-repeat 70%,
url(img/HBuilder.png) no-repeat 100% 100%;
background-size: 30%;
}
.c{
float: left;
height: 30px;width: 30px;
border: 10px dashed rgb(128,177,211);
padding: 20px;
background: url(img/HBuilder.png) no-repeat -21px -21px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
运行结果：
第一个div为五个方向（top bottom left right center）属性，第二个div为百分数属性定位更为自由，第三个div为移动像素属性，若像素值为负，则背景图相对于div向左上方移动（可以在视觉上实现切图效果）。
