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

前端之家收集整理的这篇文章主要介绍了html – 单个图像文件,用于存储页面上的所有小图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在最近的一个Stackoverflow播客中,杰夫谈到有一个单一的图像文件,其中所有这些微小的图像都在一个页面上,然后用CSS切割,以便所有的图像被正确显示.总之,要减少服务器请求的数量,以便页面加载速度更快.我就像“哇,真的很酷,我真的可以在我们的产品中使用”.

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

解决方法

基本上您将单张图像用作背景图像,但是要通过要显示的图像的偏移将其移开(向左和向上).例如.显示锤子图标:
.hammer
{
  background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}

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

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

原文链接:https://www.f2er.com/html/223818.html

猜你在找的HTML相关文章