使用Css精灵和背景位置

Question

我有一个div元素，例如宽度200px和高度200px。我需要一个小图像出现在div的右上角。如何一个通常不将它与

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

但问题是，我从一个精灵加载图像，当我使用类似

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

精灵似乎没有从挑吧正确的位置。精灵的其他部分被加载。是否有可能从精灵加载图像，并使用background-position属性。在此先感谢...

Answer 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属性。

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

如果你想显示比你的元素小的图像，你需要一个较小的元素在大的内部。

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

Answer 2

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

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

Answer 3

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

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

但这种支持还很差。

我的建议是让你的包，只是像上面:before但例如实际div

编辑它绝对位置内的另一个元素

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

Answer 4

退房利用背景出身，而不是背景位置。

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

Answer 5

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

---

“浮动” 一个从背景sprite，就像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>