// Generically

<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />

.clip               { position: absolute; top: 0; left: 0; }
		
.pos-1              { clip:rect(0 48px 48px 0); }
.pos-2              { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3              { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4              { clip:rect(48px 96px 96px 48px); top: -48px; left: -48px; }


// Within Flow
// Use the same CSS as above, only wrap the image in a div with relative positioning and a matching height and width to the area you want to show.

<div class="clipwrapper">
   <img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
</div>

.clipwrapper        { position: relative; height: 48px; width: 48px; }


/*
Points to remember

* The element needs to be absolutely positioned.
* To use it on an element and keep document flow, using a wrapping div with a relative position.
* The clipped away areas are transparent but still occupy space.
* For sprites other than the top/left sprite, you'll need to nudge the position back the same top/left distance you clipped away. 
*/

Sprite with Inline Images

css

CSS