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

Question

我有一张已排序的桌子。标题有背景图像（箭头）来显示排序方向。

当前的 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;
}

JSfiddle 中的工作示例。

有没有办法将它们减少为一张图像并使用 CSS 精灵？问题是合并图像不能简单地用作标题单元格的背景，因为多个图像可能会同时可见，点此。

如果可能的话，我想避免使用额外的元素。 IE7 支持会很棒，但没有它我可能也活不下去。

像 :after 这样的伪元素可以工作，但我找不到以相同方式定位图标的方法。 JSfiddle 示例。

Answer 1

我找到了一种让伪元素发挥作用的方法。将表格标题设置为 position:relative，然后如下所示：

.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% 的位置，然后向上移动几个像素以垂直居中。

Answer 2

您可以使用 SpriteMe 在您的网站上生成精灵图像。

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

Answer 3

快速 Google 搜索 CSS sprite 生成器 提供了一些选项。虽然我自己从未使用过任何这些服务，但我通常会制作一张具有透明度的 PNG 图像。然后，您将像这样引用 CSS：

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

将 background-position 属性值替换为适当的坐标。我认为 CSS sprite 服务可以在压缩完成后为您创建这些值，但 CSS 坐标可能需要一些调整才能完全达到您想要的效果。