在最近的一个Stackoverflow播客中,杰夫谈到有一个单一的图像
文件,其中所有这些微小的图像都在一个
页面上,然后用CSS切割,以便所有的图像被正确
显示.总之,要减少服务器请求的
数量,以便
页面加载速度更快.我就像“哇,真的很酷,我真的可以在我们的产品中使用”.
我的问题是：如何使用CSS？我需要使用背景图像加载图像,但是如何在大图像中指定子图像的偏移量？也就是说,假设在(50像素,50像素)的大图像中有一个锤子图标,它的大小为32像素* 32像素,那么如何强制浏览器只显示该位？
基本上您将单张图像用作背景图像,但是要通过要
显示的图像的偏移将其移开(向左和向上).例如.
显示锤子图标：
.hammer
{
background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}
但据我所知,您必须确保使用背景图像的元素具有正确的大小(例如32×32像素).
搜索CSS Sprites将为您提供更多信息.
