如何在表格排序标题中使用CSS精灵？

我有一张可以整理的桌子。标题具有背景图像（箭头）以显示排序方向

当前CSS使用3种不同的图像，如下所示：

th {
    padding-right: 21px;
}
th.sorting {
    background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
    background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
    background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}

th {
    padding-right: 21px;
    background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
    background-position: -100px -100px;
}
th.sorting_asc {
    background-position: -200px -200px;
}
th.sorting_desc {
    background-position: -300px -300px;
}

.sorting:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 7px;
    height: 9px;
    margin-top:-4px;
    background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}

中的工作示例

有没有办法将这些图像缩减为一个图像并使用CSS精灵？问题在于，合并图像不能简单地用作标题单元格的背景，因为多个图像可能会同时可见

如果可能的话，我想避免使用额外的元素。IE7的支持将是伟大的，但我可能没有它生活

像

：after

这样的伪元素可以工作，但我找不到一种方法来以相同的方式定位图标

您可以使用在站点上生成精灵图像

.sorting_asc {
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
  background-position: 32px 0px;
}
.sorting {
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
  background-position: 32px -27px;
}
.sorting_desc {
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
  background-position: 32px -53px;
}

一份快速的报告提出了一些选择。虽然我自己从未使用过这些服务，但我通常会制作一张透明的PNG图像。然后您会像这样引用您的CSS：

th {
    padding-right: 21px;
}
th.sorting {
    background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
    background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
    background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}

th {
    padding-right: 21px;
    background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
    background-position: -100px -100px;
}
th.sorting_asc {
    background-position: -200px -200px;
}
th.sorting_desc {
    background-position: -300px -300px;
}

.sorting:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 7px;
    height: 9px;
    margin-top:-4px;
    background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}

---

用适当的坐标替换

背景位置

属性值。我认为CSS sprite服务可以在压缩完成后为您创建这些值，但是CSS坐标可能需要一些调整，以获得您想要的效果。

我找到了一种让伪元素工作的方法。将表格标题设置为

position:relative

，然后如下所示：

th {
    padding-right: 21px;
}
th.sorting {
    background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
    background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
    background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}

th {
    padding-right: 21px;
    background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
    background-position: -100px -100px;
}
th.sorting_asc {
    background-position: -200px -200px;
}
th.sorting_desc {
    background-position: -300px -300px;
}

.sorting:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 7px;
    height: 9px;
    margin-top:-4px;
    background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}

---

图标位于距顶部50%的位置，然后向上移动几个像素以垂直居中。

但这不起作用。每个表格单元格显示整个图像作为其背景。我添加了“no repeat”，但是如果表格单元格换行为2行，它就会中断。请参见此处：您可以修复精灵，使图像位于对角线上（如楼梯上的台阶），这将解决标题为2+行时的重复问题，但现在所有三个图像都可以显示在每个表格单元格中。请参阅我对md答案的评论。您需要在每个图像之间留出足够的间距。已经有人建议了，但是。它应该能解决你的问题。