如何在元素中定位CSS精灵背景图像

Question

我有一个精灵图像用作背景：

#block {
  width: 143px;
  height: 144px;
  background: #0f0 url(http://www.w3schools.com/css/img_navsprites.gif) no-repeat -91px 0;
}

<div id="block"></div>

我想将背景图像定位在特定的顶部/左侧偏移处（例如，从容器元素的顶部和左侧偏移10px）。我该怎么做？

Answer 1

因为你使用CSS精灵，所以你无法按照你想要的方式定位它。但这个解决方案可能会有所帮助。在具有背景图像的附加元素上使用margin来定位它：

.BlockBox {
    display: inline-block;
    background-color: #0f0;
    width: 200px;
    height: 200px;
}
#block {
  margin: 100px 0 0 10px;
  width: 44px;
  height: 44px;
  background: url(http://www.w3schools.com/css/img_navsprites.gif) no-repeat -91px 0;
}
<div class="BlockBox">
    <div id="block"></div>
</div>

Fiddle演示。

Answer 2

position: fixed;
left: 0px;
top: 0x;