如何在表格数据中集成图像精灵？

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

如果我能看到整个表格会有帮助，请检查表格单元格上的填充。

尝试将background-clip属性设置为padding-box或content-box。我想在你的情况下你会想做填充框

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