CSS精灵图
CSS Sprite
CSS Sprite也叫CSS精灵图,CSS雪碧图 是一种网页图片应用处理方式。他允许你将一个页面涉及到的所有零星图片都包含到一张大图上面去
优点
1,减少图片字节
2,减少网页的http请求,从而大大提高页面的性能
原理
1,通过background-image引入背景图片
2,通过background-position把背景图片移动到自己需要的位置
实例
<i class = "icon1"></i>
<i class = "icon2"></i>
.icon1{
display:block;
background-image:url(1.png);
background-position:-20px 0;
width:45px;
height:70px;
}
.icon2{
display:block;
background-image:url(1.png);
background-position:-93px -84px;
width:45px;
height:70px;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升