Question

我希望将jQuery图标添加到另一个由另一个插件（jquery.tablesorter.js）添加的类中，特别是我希望将ui-icon-triangle-1-n图标添加到.headerSortUp类tablesorter 1}}。

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

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并向上移动以达到所需的图标（另一个示例......向上 - ＆gt; background-position: 0 -48px;向下 - ＆gt; background-position: -64px -48px。 ..或者向上 - ＆gt; background-position: -96px -192px;向下 - ＆gt; background-position: -64px -192px，您只需要计算图像上所需图标位于顶部和左边缘的图标数量：http://jsfiddle.net/FXq8b/1/ ）。

Answer 2

您只需创建框并将图像放入此框：

table.sortable thead tr .headerSortUp,
table.sortable thead tr .headerSortDown {
    background: url("http://code.jquery.com/ui/1.10.2/themes/smoothness/images/ui-icons_454545_256x240.png") no-repeat;   
    display: inline-block; /* or block */
    height: 14px;
    width: 14px;
}
table.sortable thead tr .headerSortUp {
    background-position: 0 -46px;
}
table.sortable thead tr .headerSortDown {
    background-position: -65px -46px;
}

使用background-position，您可以通过X和Y坐标在精灵中导航。

示例：http://jsfiddle.net/865VD/

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

2 个答案: