我有一个精灵图像设置为我页面上元素的背景，但是我如何找到正确的偏移量以便我可以在屏幕上实际看到它？
问问题
1680 次
6 回答
5
当您在图形程序中构建精灵图像时，您必须记下每个元素的偏移量并在 CSS 中使用这些偏移量。
于 2009-08-31T22:16:08.390 回答
3
您可以使用这样的工具并获取精灵中图标的背景位置。
您需要先上传图片，然后从精灵中选择一个图标。将生成 CSS，只需复制生成的 CSS 并在您的课程中使用它。
它将生成这样的 CSS 样式，您需要将其包含在您的 CSS 类中
background-position: -213px -135px;
width: 97px;
height: 65px;
于 2013-01-30T12:23:34.533 回答
2
有一些网络工具可以创建精灵并为您提供带有位置的 CSS。http://css-sprit.es/就是一个例子。
于 2009-08-31T22:20:38.320 回答
2
在线CSS Sprite Generator值得研究，它应该可以消除这种方法的一些乏味。
于 2009-08-31T22:21:16.820 回答
0
要记住的主要事情是偏移量将是负数。如果您有一个 100x500 的图像和 100x100 的精灵，那么偏移量将是：
.img1 { background-position: 0 0; }
.img2 { background-position: 0 -100px; }
.img3 { background-position: 0 -200px; }
.img4 { background-position: 0 -300px; }
.img5 { background-position: 0 -400px; }
于 2009-09-01T11:24:21.970 回答
0
由于 png 文件的空白区域占用很少的字节，只需按固定间隔放置所有“图像”，例如每 50 或 100 个像素。这样您就可以简单地找到第一个正确的值并从中删除 50/100 像素（50 ctrl-x在 vim 中）。
于 2009-09-01T14:00:05.647 回答