HTML-CSS实现背景图片出现不同的位置

首先在HTML中写入div,命名为img，在这个div中加入一个span标签并命名为img-bg和img50（5星为50）.
           

<div class="img">
	<span class="img-bg img50"></span>
	<span class="img-bg img45"></span>
	<span class="img-bg img40"></span>
	
</div>
           

在css代码中选中img-bg进行一个公共样式的调整（不能选中父集的类名）以下为本次图片。
           

.img-bg{
	display:inline-block;/*使变为行块盒，对其图片进行宽度高度的设置*/
	width: 55px;/*宽度*/
	height: 11px;/*高度设置为一排星星的高度*/
	background:url("背景图") no-repeat left top/100%;/*no-repeat 背景图不会重复，读取的位置为靠左靠上，宽度100%撑满（这里指的是上面设置的图片大小）*/
           

现在浏览器中出现的为：

开始对背景图进行定位

.img50{
background-position:0 0;/* 横坐标纵坐标为0*/
}
           

以上出现的还是五星，位置没变。

以下为

.img45{
background-position:0 -11px;/*纵坐标向下移动11个像素*/
}
           

此时出现的为4星半评分

以上

以下

.img40{
background-position:0 -22px;
}
           

以下以此类推，每次纵坐标进行移动。