前端之家收集整理的这篇文章主要介绍了
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