首页 文章

使用Css Sprites和背景位置

提问于
浏览 1762
18

我有一个div元素,比如宽度为200px,高度为200px . 我需要一个小图像出现在div的右上角 . 人们通常如何做到这一点

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

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

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

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

5 回答

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

  • 13

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

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

  • 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 指定背景坐标 . 对于元素的坐标,需要设置 leftright 属性 .

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

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

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

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

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

相关问题