设置背景中精灵图像位置的大小

Question

我将一个小图像放在div背景的角落里。我想将它包含在精灵中，但我不确定如何从精灵中设置图像的大小。我能想到的唯一解决方案是将图像放在精灵的绝对右下角以强制大小。更好的解决方案。到目前为止这是CSS：

background: url(images/fod-sprite.png) 99% 99% no-repeat #000;
background-position: -4px -154px;

Answer 1

使用:before伪类：

.test:before {
  content: "";
  float: left;
  width: 16px; /* requires width */
  height: 16px; /* require height */
  margin: 0 5px 0 0; /* specify margin */
  background: #000 url(images/fod-sprite.png) -4px -154px no-repeat;
}

Answer 2

将img放在绝对定位的范围内，将其粘贴到右下角，然后使用clip属性设置sprite的大小。

这是小提琴：http://jsfiddle.net/bengundersen/BSswy/

编辑：只要在父div上设置了溢出，就可以在没有跨度的情况下执行此操作。

使用剪辑img的另一个好处是你仍然可以打印。