設置背景中精靈圖像位置的大小

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