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

Question

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

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

Answer 1

把IMG这绝对定位的跨度内，其固定到右下角，然后使用clip属性从子画面设置的大小。

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

编辑：只要溢出，父DIV你可以做到这一点没有跨度。

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

Answer 2

使用: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; 
}