Как использовать 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;
}

Рабочий пример в JSfiddle здесь .

Есть ли способ свести их к одному изображению и использовать CSS-спрайты? Проблема в том, что объединенное изображение нельзя просто использовать в качестве фона для ячейки заголовка , потому что несколько изображений могут стать видимыми одновременно, Как здесь .

Я хотел бы по возможности избегать использования дополнительных элементов. Поддержка IE7 была бы отличной, но я, вероятно, смогу жить без нее.

Псевдо-элементы, такие как :after, могут работать, но я не могу найти способ расположить значки таким же образом. пример JSfiddle .

3 2
css css-tables css-sprites

3 ответа:

Я придумал способ работы псевдо-элементов. Задайте заголовки таблицы как 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% сверху, затем перемещается вверх на несколько пикселей, чтобы быть вертикально центрированной.

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

Быстрый поиск в Google для генератора CSS-спрайтовпредлагает несколько вариантов. Хотя я сам никогда не пользовался ни одним из этих сервисов, я обычно делал одно изображение 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 могут потребоваться некоторые настройки, чтобы получить это именно так, как вы хотите.

0