什么是css sprites,如何使用?
2024-08-23 10:58:52
css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量
优点:
1、减少网页的HTTP请求,提高页面性能
2、图片命名上的困扰
3、更换风格方便
缺点:
1、必须限定容器大小,符合背景图片元素的位置,需要计算
2、维护比较麻烦
使用步骤:
1、制作一张具有多状态的拼合图片,需要按照一定规律处理
2、给要显示背景的盒(一个固定尺寸,宽width、高height),以背景的方式加载,让其局部显示
3、通过背景图定位(background-position)控制不同的显示状态
最新文章
- map 函数----filter函数
- 2015年百度之星初赛(1) --- F 矩形面积
- Bootstrap 模态框插件
- 转:python webdriver API 之alert/confirm/prompt 处理
- Linux Oracle碰到错误:ORA-27101: shared memory realm does not exist
- 《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇05:二段跳》
- iOS开发——OC篇&;特殊数据类型
- c++实现精确计时
- C# .Net 使用zxing.dll生成二维码,条形码
- BZOJ 3410: [Usaco2009 Dec]Selfish Grazing 自私的食草者(贪心)
- javaCV开发详解之3:收流器实现,录制流媒体服务器的rtsp/rtmp视频文件(基于javaCV-FFMPEG)
- json数据导出excel
- Java中的会话Cookie&;&;Session
- ubantu中搭建virtualenv+python3.4+flask
- Windows 7安装Tensorflow
- springboot2.1.3.RELEASE+jsp笔记war部署tomcat
- Jenkins自动化构建(二)众多问题
- linus上运行jar包文件增删查
- 马士兵 spring 视频笔记
- Dream------scala--Tuple、Array、Map与文件操作
热门文章
- Tarjan缩点+LCA【洛谷P2416】 泡芙
- 10.17(山东多校联合模拟赛 day1)
- C++并发低级接口:std::thread和std::promise
- EF core 学习 执行原生sql语句 之ExecuteReader 和ExecuteScalar
- [TJOI2013]循环格 费用流 BZOJ3171
- 在生产环境下禁用swagger
- adminLte 解决菜单栏 bug
- getResourceAsStream properties
- Subarray Sum K
- Python Pandas Merge, join and concatenate