我有一个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;
}
