html – 单个图像文件,用于存储页面上的所有小图像

在最近的一个Stackoverflow播客中,杰夫谈到有一个单一的图像文件,其中所有这些微小的图像都在一个页面上,然后用CSS切割,以便所有的图像被正确显示.总之,要减少服务器请求的数量,以便页面加载速度更快.我就像“哇,真的很酷,我真的可以在我们的产品中使用”.

我的问题是：如何使用CSS？我需要使用背景图像加载图像,但是如何在大图像中指定子图像的偏移量？也就是说,假设在(50像素,50像素)的大图像中有一个锤子图标,它的大小为32像素* 32像素,那么如何强制浏览器只显示该位？

解决方法

基本上您将单张图像用作背景图像,但是要通过要显示的图像的偏移将其移开(向左和向上).例如.显示锤子图标：

.hammer
{
  background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}

但据我所知,您必须确保使用背景图像的元素具有正确的大小(例如32×32像素).

搜索CSS Sprites将为您提供更多信息.

原文地址：https://www.jb51.cc/html/223818.html