如何將圖像精靈集成到表格數據中？

Question

通過使用Instand sprite我創建了我自己的精靈圖像。

通過使用一箇中繼器控制我的<td>類等於設置爲arg16

Private Sub cdcatalog_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles cdcatalog.ItemDataBound 
    If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then 
     Dim Cell as HtmlTableCell = TryCast(e.Item.FindControl("img"), HtmlTableCell) 
     Cell.Attributes.Add("class", "text-center sprite arg16") 
    End If 
End Sub 

在表格單元格<td id="img" runat="server" class=""></td>

.sprite { background: url('sprite.png') no-repeat top left; } 
.sprite.arg16 { background-position: 0px 0px; width: 16px; height: 16px; } 
.sprite.aus16 { background-position: 0px -26px; width: 16px; height: 16px; } 
.sprite.bel16 { background-position: 0px -52px; width: 16px; height: 16px; } 
.sprite.bra16 { background-position: 0px -78px; width: 16px; height: 16px; } 
.sprite.chl16 { background-position: 0px -104px; width: 16px; height: 11px; } 
.sprite.cyp16 { background-position: 0px -125px; width: 16px; height: 16px; } 
.sprite.den16 { background-position: 0px -151px; width: 16px; height: 16px; } 

但不幸的是，我得到以下結果

每個表格單元格爲

。那麼我在這裏做錯了什麼？ 「繪製的CSS」是

.sprite { 
    background: url('sprite.png') no-repeat top left; 
    } 

    .sprite.arg16 { 
    background-position: 0px 0px; 
    width: 16px; 
    height: 16px; 
    } 

和我的精靈是

Answer 1

你的表格單元格比圖像的大小。嘗試確保單元格尺寸合適。我看不到所有的代碼，但我會在下面發佈一些代碼/小提琴。

這裏是它的一個工作：http://jsfiddle.net/AU7PQ/1/

這裏是它的一個的jsfiddle不工作：http://jsfiddle.net/AU7PQ/

不同的是表格單元格中的內容在第一小提琴迫使細胞比css中指定的大。

這將與CSS工作，你必須

<table> 
    <tr> 
     <td class="sprite arg16"> 
     </td> 
    </tr> 
</table> 

這不會：

<table> 
    <tr> 
     <td class="sprite arg16"> 
      . <br /> 
      . 
     </td> 
    </tr> 
</table> 

所以，檢查，以確保您的細胞不被強迫被裏面的內容大。

Answer 2

如果我能看到整個表，它會幫助，請檢查您的表格單元格上的填充。

嘗試將背景剪輯屬性設置爲填充框或內容框。我認爲在你的情況下，你會想做填充框

http://www.w3schools.com/cssref/css3_pr_background-clip.asp