在最近的一场Stackoverflow 播客，Jeff 谈到拥有一个图像文件，其中包含遍布整个页面的所有小图像，然后使用 CSS 对其进行剪切，以便所有图像都能正确显示。重点是减少服务器请求的数量，以便页面加载速度更快。我当时想“哇，这真的很酷，我真的可以在我们的产品中使用它”。
我的问题是：这是如何用 CSS 完成的？我需要加载带有背景图像的图像，但是如何指定子图像在大图像中的偏移量？也就是说，假设大图像中（50px，50px）处有一个锤子图标，其大小为32px * 32px，如何强制浏览器只显示该位？
基本上，您使用单个图像作为背景图像，但将其移开（向左和向上）您要显示的图像的偏移量。例如。显示锤子图标：
.hammer
{
background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}
但据我所知，您必须确保使用背景图像的元素具有正确的大小（例如 32x32 像素）。
搜索 CSS Sprites 将为您提供更多信息。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
