css中雪碧图(sprite)的使用及制作方法

雪碧图(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代码。

css中雪碧图(sprite)的使用及制作方法相关推荐

CSS中雪碧图CSS-Sprite的使用，解决图片闪烁问题
背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求,但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源分别引入会导致的问题: (1)切换图片时,会 ...
html雪碧图效果,html和css中雪碧图的使用
雪碧图:多个图片集成在一个图片中的图使用雪碧图可以减少网络请求的次数,加快运行的速度. 例如要使用下面的雪碧图:需要用到background-position属性代码示例: #container ...
HTML、CSS中雪碧图的使用
雪碧图:多个图片集成在一个图片中的图使用雪碧图可以减少网络请求的次数,加快运行的速度. 例如要使用下面的雪碧图:需要用到background-position属性代码示例: <!DOCTYP ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
三分钟学会如何使用css雪碧图（Sprite）
一. 先分析一下名字(有没有人跟我一开始一样疑惑为啥叫这名) Sprite 英文小精灵的意思,Sprite又叫小精灵图,恰好呢某绿瓶气泡水名也叫sprite,狠狠地撞名-_ ...
css雪碧图及优缺点
[前言] 做开发的小伙伴可能经常遇到雪碧图,那么究竟什么是雪碧图呢? [简介] 官方解释: CSS雪碧图即CSS Sprite(精灵),在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将 ...
移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
CSS雪碧图demo（含雪碧代码）
css雪碧图demo效果图,含hover,代码附件下载sprite_demo.zip 雪碧图制作问题参考: HTML 5开发的在线雪碧图片合成工具 http://developer.51cto.com ...
linux图形化应用程序快捷方式制作方法
linux图形化应用程序快捷方式制作方法准备一个Linux系统[传统Unity桌面环境,应用程序启动器的容器--Launcher] 说明 linux的.desktop文件是一种菜单和快捷方式的描述 ...

css中雪碧图(sprite)的使用及制作方法

css中雪碧图(sprite)的使用及制作方法相关推荐

最新文章

热门文章