如何在表排序标题中使用CSS sprites？

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 here中的工作示例。

有没有办法将这些缩小为一个图像并使用CSS精灵？问题是合并的图像不能简单地用作标题单元格的背景，因为多个图像可能会立即变为like here。

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

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

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 search for a CSS sprite generator提供了一些选项。虽然我自己从未使用过任何这些服务，但我通常会制作一个具有透明度的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精灵服务可以在完成后根据它们的压缩为你创建这些值，但是CSS坐标可能需要一些调整才能完全按照你想要的方式获得它。