20150726 CSS Sprite雪碧图应用
2015-07-31 16:38
459 查看
CSS Sprite雪碧图应用
使用规则：
1、静态图片，不随用户信息的变化而变化
2、小图片，图片容量比较小
3、加载量比较大
4、大图不建议拼成雪碧图
目的：有效的减少http请求数量，加速内容显示
（每请求一次，就会和服务器链接一次，建立链接是需要额外时间的）
原理：css background-position 坐标系
控制一个层可显示的区域范围大小，通过一个窗口，进行背景图的滑动。
制作（实现方式）：ps手动拼图、使用sprite工具自动生成（CssGaga http://www.99css.com/1524/）
静态页面实现：i标签
使用规则：
1、静态图片，不随用户信息的变化而变化
2、小图片，图片容量比较小
3、加载量比较大
4、大图不建议拼成雪碧图
目的：有效的减少http请求数量，加速内容显示
（每请求一次，就会和服务器链接一次，建立链接是需要额外时间的）
原理：css background-position 坐标系
控制一个层可显示的区域范围大小，通过一个窗口，进行背景图的滑动。
制作（实现方式）：ps手动拼图、使用sprite工具自动生成（CssGaga http://www.99css.com/1524/）
静态页面实现：i标签
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 20150726 Web前端开发基础html+css
- 【CSS学习】CSS Text（文本）
- 20150724 CSS3学习笔记（下）
- 纯 CSS 实现 tab 页切换
- 20150723 CSS3学习笔记（中）
- 20150722 CSS3学习总结（上）
- 【CSS学习】CSS 背景
- css3画圆
- 纯css3实现图片等比例缩放+全屏居中
- CSS查漏补缺
- css命名规范
- 两个css文件定义了同样的内容，后执行的会覆盖前面的
- 常见ie css hack
- CSS自适应网页制作教程
- Win10开始菜单如何改回Win7经典样式?
- 史上最全的CSS hack方式一览
- 关于css3的动画总结
- 解读CSS布局之-水平垂直居中
- CSS3设置字体
- CSS中的background的详细属性