CSS-sprite(雪碧图、精灵图)
2024-10-18 08:15:13
Css Sprite(优点)
- 减少图片的字节。
- 减少网页的http请求,从而大大的提高页面的性能。
- 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
- 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
实现原理
css background-position
- 控制一个层可显示的区域范围大小,
- 通过一个窗口进行背景图的滑动
总结
将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的 background-image,background- repeat,background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;CSS Sprites能减少图片的字节。
参考博客:https://blog.csdn.net/allenyhy/article/details/81484642
参考博客:https://blog.csdn.net/qq_42975998/article/details/88628971
最新文章
- ReactJS入门(一)—— 初步认识React
- Daily Scrum Meeting ——FirstDay
- php set_time_limit()用法测试详解
- IIS 301 重定向 带参数链接
- shell中substr总结
- Python:itertools模块
- PyCharm 2018.1破解过程
- 如何将本地git仓库中的代码上传到github
- 使用Boost Regex 的regex_search进行遍历搜索
- js正则表达式【原】
- java设计模式之动态代理的概述和实现
- mac挂载ntfs文件系统方法
- 深入字节码理解invokeSuper无限循环的原因
- 【总结】前端框架:react还是vue?
- Hibernate:工作原理
- Tomcat 之 启动tomcat时 错误: 代理抛出异常 : java.rmi.server.ExportException: Port already in use: 1099;
- Android媒体扫描详细解析之二(MediaScanner &; MediaProvider)
- ActiveMQ教程(简介与安装)
- 使用Vagrant创建多节点虚拟机集群
- [SDOI2013]淘金 数位DP
热门文章
- nyoj 21-三个水杯(BFS)
- 领扣(LeetCode)删除链表中的节点 个人题解
- vim可视化模式
- Qt Framework 问题之 framework/Versions/A:bundle format unrecognized, invalid, or unsuitable
- 【Linux系列】Centos 7部署Laravel项目(七)
- Flutter学习笔记(30)--Android原生与Flutter混编
- ubuntu 交叉编译 busybox 1.31.1
- AI手写输入法 - pytorch从入门到入道(二)
- python numpy学习
- 新手学分布式 - Envoy Proxy XDS Server动态配置的一点使用心得