Using Css Sprites and background position

问题

I have a div element, say of width 200px and height 200px. I need a small image to appear on the top right corner of the div. How one would normally do it would be with

background: url(/images/imagepath.png) top right;

However the problem is, I am loading the image from a sprite and when I use something like

background: url(/web/images/imagepath.png) -215px -759px  top right;

the sprite doesnt seem to pick it from the right location. Some other part of the sprite is loaded. Is it possible to load an image from sprite and use the background-position attribute as well. Thanks in advance...

回答1:

You need to specify the coordinates for your element position and the background position in two different ways.

#yourimage {
  background-image: url(/web/images/imagepath.png);
  /* background coordinates */
  background-position: -215px -759px;

  /* element coordinates */
  position:absolute;
  left: 0;  /* 0px from the left */
  top:  0;  /* 0px from the top  */
}

With the background-position you specify the background coordinates. For the coordinates of your element, you need to set the left and right properties.

Keep in mind that in order to use sprites, your element must be of the correct size. The image you are using as a background must have enough space to cover the width and height of the element, not more, otherwise you will see more than one image from your sprites image.

If you want to display a image smaller than your element, you need a smaller element inside the big one.

<div id="container">
  <div class="background"></div>
  my content here
</div>

Then in your CSS

#container {
  position:relative;
  width: 200px;  /* size of your big element */
  height: 200px;
}
#container .background {
  background: url(/web/images/imagepath.png) -215px -759px;
  width:  50px; /* width and height of the sprite image you want to display */
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

回答2:

You can use :before pseudoclass like this:

.element:before {
   content:"";
   position:absolute;
   right:0;
   top:0;
   width:20px;
   height:20px;
   background: url(/web/images/imagepath.png) -215px -759px;
}

but this is poorly supported yet.

My advice is to make another element inside your wrap and position it absolutely just like above :before but for example real div

EDIT

Another tricky way of using sprites in box corners is described here .

回答3:

If you can use a preprocessor like SCSS:

(updated to actually answer the question asked; also see live example)

// ----------- only things you need to edit { ---------------
$sprite-size: 16px; // standard sprite tile size
$sprite-padding: 0px; // if you have padding between tiles
// ----------- } only things you need to edit ---------------

// basic sprite properties (extension-only class)
%sprite {
    width:$sprite-size; height:$sprite-size; // must restrict viewport, otherwise other sprites may "bleed through"
    // could set shared standard tilesheet `background-image: url(...)`
    // other standard styles, like `display:inline-block` or `position:absolute`
}

// helper for assigning positioning using friendlier numbers like "5" instead of doing the math
@mixin sprite-offset($xoffset:0, $yoffset:0, $increment:$sprite-size, $padding: $sprite-padding) {
    background-position: -($xoffset*($increment + $padding)) -($yoffset*($increment + $padding));
}

To "float" a background from a sprite, like the answer by @jose-faeti indicates you'd have to involve a placeholder element

<div class="float-bg">
    <div class="bg"></div>
    <p>Lorem ipsum dolor si...</p>
</div>

with style like:

.float-bg .bg {
    @extend %sprite; // apply sizing properties
    background-image: url(...); // actually set the background tiles

    @include sprite-offset(4);

    // specific configuration per accepted answer
    position:absolute;
    top: 0;
    right: 0;
}

In my original answer, to create a list of buttons, you could:

// list out the styles names for each button 
$buttons: 'help', 'font', 'layerup', 'layerdown', 'transform', 'export', 'save', 'clear', 'move-left', 'move-right', 'move-up', 'move-down', 'png', 'jpg', 'svg', 'funky';

.btns > * { @extend %sprite; background-image:... } // apply sizing properties, bg

// autoassigns positioning
@for $i from 1 through length($buttons) {
    $btn: nth($buttons, $i);
    .btn-#{$btn} {
        // @extend .sprite;
        @include sprite-offset( $i - 1 );
    }
}

would then work on something like:

<ul class="btns">
    <li class="btn-help">...</li>
    <li class="btn-font">...</li>
    <li class="btn-save">...</li>
    <li class="btn-export">...</li>
    <li class="btn-etc">...</li>
    <li class="btn-etc">...</li>
</ul>

回答4:

You specify either top right or an exact pixel position, not both.

Besides, you cannot load a small portion of an image sprite to use as the background for a larger element. You'll have to put a small element inside it, that has the size of the sprite.

回答5:

check out using background-origin instead of background-position.

you can only have one background-position specified, and right now you have two (-215px -759px) and (top right).

来源：https://stackoverflow.com/questions/7444358/using-css-sprites-and-background-position

标签

css

css-sprites

background-position