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;
}
           

以下以此類推，每次縱坐标進行移動。