如何使用精灵背景图像在元素上显示一次(不重复)？

Question

我希望将jQuery图标添加到另一个由另一个插件(jquery.tablesorter.js)添加ui-icon-triangle-1-n的.headerSortUp类中,特别是我希望将该图标添加到该类中tablesorter.

我正在尝试添加以下类但不能为我的生活如何为它制定一个精灵.

table.sortable thead tr .headerSortUp {
  cursor: pointer;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background: url(jquery-ui/css/smoothness/images/ui-icons_222222_256x240.png) 0 -16px;
}

我之前没有使用CSS精灵,所以我不完全确定如何做到这一点.

我看到的情况是我只想要显示背景图像的一部分,但我希望它位于文本的右侧中心并且不重复.

Answer 1

这里有一个关于sprite的背景图像裁剪的优秀教程: css-background-image-hacks

诀窍是使用伪选择器:after或:before将图标放入标题中,而无需在html结构中添加其他元素.

在这里,我使用tablesorter插件添加一个工作演示:http: //jsfiddle.net/FXq8b/

.tablesorter thead tr {
  line-height:16px;
  background-color:#ddd;
  cursor: pointer;
}
.headerSortUp:after, .headerSortDown:after {
   content:"";
   float:right;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url('http://www.wooldalejunior.org.uk/ui/vendor/jquery.ui/css/smoothness/images/ui-icons_222222_256x240.png');
   background-position:0 -16px;
}
.headerSortDown:after {
   background-position:-64px -16px;
}

现在你需要向左移动多次x 16px并向上移动以达到所需的图标(换另一个例子......向上 - > background-position: 0 -48px;向下 - > background-position: -64px -48px......或向上 - > background-position: -96px -192px;向下 - > background-position: -64px -192px,你只需要计算从顶部和左边缘有多少个图标位于图像上:http://jsfiddle.net/FXq8b/1/).