使用 Css Sprites 和背景位置

Using Css Sprites and background position

提问by Maxim Dsouza

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

我有一个 div 元素，比如宽度 200px 和高度 200px。我需要一个小图像出现在 div 的右上角。人们通常会怎么做

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

精灵似乎没有从正确的位置挑选它。加载了精灵的其他部分。是否可以从精灵加载图像并使用 background-position 属性。提前致谢...

回答by Jose Faeti

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-positionyou specify the background coordinates. For the coordinates of your element, you need to set the leftand rightproperties.

使用background-position指定背景坐标。对于元素的坐标，您需要设置left和right属性。

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

然后在你的 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;
}

回答by avall

You can use :beforepseudoclass like this:

您可以:before像这样使用伪类：

.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 :beforebut for example real div

我的建议是在你的包裹中制作另一个元素，并将其绝对像上面一样定位，:before但例如真实的div

EDIT

编辑

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

此处描述了在框角使用精灵的另一种棘手方法。

回答by drzaus

If you can use a preprocessor like SCSS:

如果您可以使用像 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-faetiindicates you'd have to involve a placeholder element

要从精灵中“浮动”背景，就像@jose-faeti 的回答一样，表明您必须涉及占位符元素

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

回答by GolezTrol

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

您指定一个top right或一个确切的像素位置，而不是两者。

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.

此外，您不能加载图像精灵的一小部分以用作较大元素的背景。你必须在里面放一个小元素，它有精灵的大小。

回答by bdparrish

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

使用 background-origin 而不是 background-position 检查。

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

你只能指定一个背景位置，现在你有两个 (-215px -759px) 和 (右上角)。