所以我正在尝试将一些图像制作成精灵。我以为我很清楚自己在做什么，但后来我没有得到6张不同的图像，而是得到了6次1张压扁的图像。
这是我的代码
img.sprite
{
width:100px;
height:100px;
background-image:url(myimage.jpg) 0 0;
}
img.sprite2
{
width:100px;
height:100px;
background-image:url(myimage.jpg) -100px 0;
}
</style>
</head>
<body>
<img class="sprite" src="myimage.jpg" width="1" height="1" />
<img class="sprite2" src="myimage.jpg" width="1" height="1" />
当我发布这篇文章时，我的图像只是被压扁了，所以我有6张精灵的图像被调整了大小并扭曲了，而我希望它只给我一部分调整了大小的图像。由于某种原因，它没有修剪。
如果您将背景图像与内联图像相结合，这将不起作用。背景图像用于div和其他页面元素。
此外，在css中，位置坐标在"background-image"属性中，这也不起作用，它要么需要在通用的"background"css属性中，要么需要在特定的"backbackground-position"属性中。看见http://www.w3schools.com/cssref/css3_pr_background.asp
如果您需要在内联图像上使用它，请使用css剪辑尝试此技术http://css-tricks.com/css-sprites-with-inline-images/