CSS精灵技术及其优化经验分享
来源:互联网 发布:php旅游系统 编辑:程序博客网 时间:2024/06/07 01:35
由于网速的限制,页面开发者都喜欢把网页里面的图片字节数控制的非常小,往往在一个图片文件夹里散落着n多的小碎图。随着网络技术的发展,网速的提升,大家越来越重视页面的加载速度,页面效率问题,过去的那些小图便成为了前端开发者的眼中钉,因为每加载一张图片都会产生一次浏览器请求数,发起的请求数越多那么页面加载的速度也越慢。还有当页面加载时,图片一个个的零星显示,鼠标经过时候背景闪白等也都是我们不能忍受的。于是乎将页面中的背景图整合到一起,利用“background-image”,“background- repeat”,“background-position”的组合进行背景定位的技术被广泛使用与了页面构建中,这就是CSS Sprites。当然CSS Sprites技术也存在着维护不便,内存占用大等等的缺点。
精灵图(CSS Sprites)就是通过将多个小图片融合到一张图里面,一般是将整张图片先放到一个div盒子里面,然后通过background背景定位技巧来显示需要的图片,盒子的大小决定要显示的图片的面积。
Background:url(“…”) no-repeat 50px 50px;
url是精灵图的地址,no-repeat是图片的显示方式(不重复),两个数据是定位的数据,分别表示左、上的距离
阅读全文
0 0
- CSS精灵技术及其优化经验分享
- CSS Sprites(CSS精灵)技术及其优化经验分享
- CSS Sprites(CSS精灵)技术及其优化经验分享
- CSS Sprites(CSS精灵)技术及其优化经验分享
- CSS Sprites技术及其优化
- CSS Sprites技术及其优化
- CSS精灵技术
- 谈谈CSS Sprites技术及其优化
- 谈谈CSS Sprites技术及其优化
- CSS sprites CSS精灵技术
- 网易视频云技术分享:Facebook memcache优化经验
- css float 经验分享
- CSS经验分享
- sql优化经验分享
- CSS Sprites(CSS精灵)技术
- css 原理及其优化
- CSS原理及其优化
- css 原理及其优化
- Linux 文件系统与设备文件系统(3)
- redis主从配置及主从切换
- Hadoop RPC机制的使用
- uml图的成员
- Python+django实现邮箱验证登录
- CSS精灵技术及其优化经验分享
- 微信公众号测试
- 欢迎使用CSDN-markdown编辑器
- 夜灵的Html笔记Day14——H5新表单、视频音频
- 光环国际PMP:项目经理常见的工作误区
- 找不到/storage/emulated/0文件
- Https系列之四:https的SSL证书在Android端基于okhttp,Retrofit的使用
- relativelayout等布局点击事件无效
- redisTemplate.keys(pattern)模糊查询找不到keys