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

概述在最近的一个Stackoverflow播客中,杰夫谈到有一个单一的图像文件,其中所有这些微小的图像都在一个页面上,然后用CSS切割,以便所有的图像被正确显示.总之,要减少服务器请求的数量,以便页面加载速度更快.我就像“哇,真的很酷,我真的可以在我们的产品中使用”. 我的问题是：如何使用CSS？我需要使用背景图像加载图像,但是如何在大图像中指定子图像的偏移量？也就是说,假设在(50像素,50像素)的 在最近的一个Stackoverflow播客中,杰夫谈到有一个单一的图像文件,其中所有这些微小的图像都在一个页面上,然后用CSS切割,以便所有的图像被正确显示.总之,要减少服务器请求的数量,以便页面加载速度更快.我就像“哇,真的很酷,我真的可以在我们的产品中使用”.

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

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

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

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

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

总结

以上是内存溢出为你收集整理的html – 单个图像文件,用于存储页面上的所有小图像全部内容，希望文章能够帮你解决html – 单个图像文件,用于存储页面上的所有小图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。