如何在使用精灵时裁剪背景图像

Question

here is the file : http://studioteknik.ca/stackoverflow_question/test1.html i need to see only one background image at the time, let's say the second. It's 400 pixel from the top, but i need it image to be crop top 400 height. HOW TO DO THAT ?

Answer 1

In general content images should not be backgrounds or sprites, they should be inline images using the IMG tag. Sprites are usually reserved for UI elements such as icons and menu elements.

<div class="sprite1"></div>

CSS:

.sprite1 { 
        height:400px;
        width:400px;
        background-image:url(http://www.studioteknik.ca/stada/wp-content/themes/stada-theme/images/banner_sprite.jpg);
        background-position:0 -400px; 
    }

Answer 2

Yes - that's a good answer. Generally, you position a sprite exactly the way you would position a normal image, but set the height and width so that they only cover one portion of it. The background position is the only thing that changes. If I had a 40 pixel high sprite and wanted to display it has 2 20px high images, the code would be this:

  .sprite1{ height:20px;
 width:20px;
 background-image:url("myimage.jpg");
  background-position: 0 0;
 }

.sprite2{
height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position:0 -20;
}

Answer 3

I use a pseudo element (before/after) to generate the box size I want for the sprite and add the background-image to that.

That way you can set the 'normal' element to position: relative and the :after to position: absolute; .

Then position the after as you want it in relation to the main container and the size of the after element prevents any more of the image sprite 'bleeding out'.

I documented that technique more fully here: http://benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/