使用Css Sprites和背景位置

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

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

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

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

精灵似乎没有从正确的位置选择它。 sprite的其他一部分被加载。是否可以从sprite加载图像，并使用background-position属性。提前致谢…

解决方法

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

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

使用背景位置指定背景坐标。对于元素的坐标，您需要设置左右属性。

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

如果要显示小于元素的图像，则需要较大的元素。

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

原文地址：https://www.jb51.cc/css/218452.html