使用Css Sprites和背景位置

5 回答

• 2

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

  #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 属性 .

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

  如果要显示小于元素的图像，则需要在较大元素内部使用较小的元素 .

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

  回复于 2024-04-27T09:37:49+08:00
• 29

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

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

  但这支持得很差 .

  我的建议是在你的包装中制作另一个元素并将其定位在上面 :before ，但是例如真正的 div

  EDIT

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

  回复于 2024-04-27T09:37:49+08:00
• 0

  如果您可以使用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));
  }
  

  ---

  要"float"来自精灵的背景，如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>
  

  回复于 2024-04-27T09:37:49+08:00
• 0

  您指定 top right 或精确像素位置，而不是两者 .

  此外，您无法加载图像精灵的一小部分作为更大元素的背景 . 你必须在里面放一个小元素，它有精灵的大小 .

  回复于 2024-04-27T09:37:49+08:00
• 13

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

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

  回复于 2024-04-27T09:37:49+08:00