使用 Css Sprites 和背景位置

Posted 2023-05-08

【中文标题】使用 Css Sprites 和背景位置

【英文标题】：Using Css Sprites and background position

【发布时间】：2011-11-18 15:37:14

【问题描述】：

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

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

但问题是，我正在从精灵加载图像，当我使用类似的东西时

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

精灵似乎没有从正确的位置选择它。精灵的其他部分被加载。是否可以从精灵加载图像并使用背景位置属性。提前谢谢...

【参考方案1】：

您需要以两种不同的方式指定元素位置和背景位置的坐标。

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

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

请记住，要使用精灵，您的元素必须具有正确的大小。您用作背景的图像必须有足够的空间来覆盖元素的宽度和高度，而不是更多，否则您会从 sprite 图像中看到多个图像。

如果你想显示比你的元素更小的图像，你需要在大元素中放一个更小的元素。

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

然后在你的 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】：

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

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

但这还没有得到很好的支持。

我的建议是在你的 wrap 中创建另一个元素，并将其放置在绝对像上面:before 但例如真正的div

编辑

在盒子角落使用精灵的另一种棘手方法是 described here 。

【讨论】：

这似乎是当今最好的方法。兼容现代浏览器和 IE8+。

【参考方案3】：

如果你可以使用像 SCSS 这样的预处理器：

（已更新以实际回答所提出的问题；另请参阅 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));

---

要从精灵中“浮动”背景，例如 the answer by @jose-faeti 表示您必须使用 involve a placeholder element

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

风格如下：

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

---

在我对create a list of buttons 的原始回答中，您可以：

// 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 );
    

然后将在 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】：

您可以指定top right 或精确的像素位置，不能同时指定两者。

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

【讨论】：

像素位置是选择应该选择精灵的哪一部分。然而，精灵的那部分应该只出现在 div 的右上角。有没有一种方法可以使用精灵来完成？

你可以制作一个小 div，它具有精灵的大小，并像往常一样给它精灵背景。然后把那个 div 放在你的 200px*200px div 中，然后给 sprite div position: absolute; top: 0; right: 0;。父级也必须有position: relative 或position: absolute，否则定位将无法正常工作。

部分解决了，因为我意识到，我正在寻找的东西无法实现......

【参考方案5】：

使用 background-origin 而不是 background-position 签出。

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