css中雪碧图(sprite)的使用及制作方法
2024-09-29 22:46:47
雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位。
1.先看一下雪碧图
没有使用雪碧图时图标是这样一个个的单独文件:
合成雪碧图后是这样拼在一起的一张图:
2.雪碧图的使用
首先确定要使用的图标的位置和大小(可以通过ps测量),
如下的雪碧图大小统一,排列规则
它们的大小均为30px*30px,第一个图标位置为0 0,第二个的位置为30px 0,依次...
样式可以这样写:
1 .box1 li:nth-child(1) {
2 width: 30px;
3 height: 30px;
4 background: url(./images/map-icon.png) no-repeat 0 0; /* 第一个图标*/
5 }
6
7 .box1 li:nth-child(2) {
8 width: 30px;
9 height: 30px;
10 background: url(./images/map-icon.png) no-repeat -30px 0; /* 第二个图标*/
11 }
12
13 .box1 li:nth-child(3) {
14 width: 30px;
15 height: 30px;
16 background: url(./images/map-icon.png) no-repeat -60px 0; /* 第三个图标*/
17 }
排列不规则的雪碧图测量计算就不太方便了,推荐一个在线雪碧图样式工具http://tools.jb51.net/code/css_sprite
3.合成雪碧图
如果没有美工MM给我们做图,自己找来的很多零碎图标(.png)可以使用CssSprite工具进行合成。
使用较为简单,选择图片后,可以竖排或横排,也能手动调整位置;设置css中路径名及保存名称,生成雪碧图即可,可以同时生成对应的css代码。
转载请注明来源: 007办公资源网站 https://www.wode007.com
最新文章
- 深入理解 Android 之 View 的绘制流程
- mysql 触发器
- 汉字正则表达式[\u4E00-\u9FFF]原因
- ASP.NET Web API 异常日志记录
- PHP最简单的后门,且难查,不报毒!
- Windows server 2012 AD DS 搭建步骤
- ASP.NET中的KRE是什么?
- 交通银行 Java Socket 服务启动 管理 WINDOWS 版
- (十一)C语言中内存堆和栈的区别
- poj - 3225 Roadblocks(次短路)
- vijosP1067Warcraft III 守望者的烦恼
- 如何改变dreamweaver的编码方式
- [转] iOS性能优化技巧
- Codeforces Round #277.5 (Div. 2) A,B,C,D,E,F题解
- jQuery工具函数上
- hdu1506(dp减少重复计算)
- c++ -->; 父类与子类间的继承关系
- 做IT,必备的安全知识!
- ARM LCD屏调试3--屏的应用编程
- SSM前言——相关设计模式