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;
}

 

 

 

posted @   咿呀丫  阅读(12)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
点击右上角即可分享
微信分享提示