带内联图像的精灵

Posted 2021-02-26

// 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. 
*/