背景内のスプライト画像位置のサイズを設定する

Question

divの背景の隅に小さな画像を配置しています。私はスプライトにインクルードしたいのですが、スプライトからイメージのサイズを設定する方法がわかりません。私が考えることができる私の唯一の解決策は、サイズを強制的にスプライトの絶対右下角にイメージを配置することです。よりよい解決策。ここでCSSはこれまでです：

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

Answer 1

は、スプライトのサイズを設定するには、クリップのプロパティを使用し、右下にそれを貼り付け、絶対位置だスパン内のimgを入れてください。 http://jsfiddle.net/bengundersen/BSswy/

編集：あなたがいる限りオーバーフローが親のdivに設定されているようスパンせずにこれを行うことができます

ここでフィドルです。

クリップされた画像を使用するもう1つの利点は、まだ印刷できることです。

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