1. 什么是CSS Sprite

将一些碎小的图片拼接为一张大点的图片来使用,目的是为了减少浏览器的http请求次数以提高网页的加载速度。
每次请求图片都需要跟服务器建立一次连接,并且浏览器的最大并发请求数是有限制的。使用雪碧图并不能减少传送的数据的总量,但可以通过节省掉一部分建立、关闭连接的时间来加快网页的加载速度。

2. 如何使用

2.1 怎么得到雪碧图?

※ 直接手动拼接,只要可以将需要用到的小图片拼在一张图片上即可,当然,拼接应该尽量遵循的原则:

尽量让这张图片以后可维护;

在保证可维护性的前提下,尽量少的在图片上留大面积空白;

※ 使用生成工具,比如cssgaga等,参见http://www.99css.com/cssgaga/

2.2 怎么使用雪碧图?

拿到雪碧图之后,如果是使用手动拼接方式的话,就使用ps等工具量一下具体的坐标,如果是使用生成工具自动生成的话,生成结果中应该会带上之前每张小图片的坐标的。

使用雪碧图的套路就是先使用background-image:url(“foo.png”)来设置元素的背景图片,然后使用background-position:x-shift y-shift;来滑动图片。

一个简单的使用雪碧图的例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Sprite Demo</title>
<style type="text/css">
/*侧栏容器div*/
.nav-bar{
width:250px;
}
/*侧栏列表样式*/
.nav-list li{
list-style:none;
padding:10px;
border:1px solid #DDD;
}
/*sprite图标的样式*/
.nav-list li i{
background-image:url("imgs/sidebar.png");
display:inline-block;
width:30px;
height:24px;
float:left;
}
/*鞋包配饰*/
.nav-list li:nth-child(2) i{
background-position:0px -24px;
}
/*运动户外*/
.nav-list li:nth-child(3) i{
background-position:0px -48px;
}
/*珠宝手表*/
.nav-list li:nth-child(4) i{
background-position:0px -72px;
}
/*手机数码*/
.nav-list li:nth-child(5) i{
background-position:0px -96px;
}
/*家电办公*/
.nav-list li:nth-child(6) i{
background-position:0px -120px;
}
/*护肤彩妆*/
.nav-list li:nth-child(7) i{
background-position:0px -144px;
}
/*母婴用品*/
.nav-list li:nth-child(8) i{
background-position:0px -168px;
}
</style>
</head>
<body> <div class="nav-bar">
<ul class="nav-list">
<li><i></i>服装内衣</li>
<li><i></i>鞋包配饰</li>
<li><i></i>运动户外</li>
<li><i></i>珠宝手表</li>
<li><i></i>手机数码</li>
<li><i></i>家电办公</li>
<li><i></i>护肤彩妆</li>
<li><i></i>母婴用品</li>
</ul>
</div> </body>
</html>

效果图:

雪碧图:

3.总结

3.1 雪碧图的原理?

以左上角的顶点作为定位的原点。

x偏移为负值的话就向右移动。

y偏移为负值的话就向下移动。

原图并不会被裁切,它还是那么大,就在那儿,只是超出的部分隐藏掉了,相当于是滑动图片。

3.2  涉及到的属性

background-image:url("imgs/sidebar.png");

background-position : x-shift y-shift;

background-position-x : x-shift;

background-position-y : y-shift;

3.3 什么时候适合使用雪碧图?

图是静态的,不随着用户信息的变化而变化。

小图片,容量比较小,主要是为了减少http请求次数。

相关生成雪碧图工具:

CssGaga

http://www.99css.com/cssgaga/

在线生成雪碧图:

http://alloyteam.github.io/gopng/

http://csssprites.com/

参考资料:

1. 慕课网视频教程 http://www.imooc.com/learn/93

2. StackOverFlow的解释: http://stackoverflow.com/questions/3889661/whats-this-negative-value-in-this-css-property

CSS Sprite笔记的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. css sprite,css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  3. css sprite 调整大张图片中小图标的大小

    直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...

  4. HTML CSS SPRITE 工具

    推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV

  5. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  6. CSS雪碧,即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

  7. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  8. CSS Sprite 图标

    HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...

  9. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

随机推荐

  1. 转 Maven常用仓库地址以及手动添加jar包到仓库

    转自:http://blog.csdn.net/kqygww/article/details/12837783 共有的仓库 http://repository.sonatype.org/content ...

  2. PDO笔记

    <?php/* * 查询操作主要是PDO::query().PDO::exec().PDO::prepare().PDO::query()主要是用于有记录结果返回的操作,特别是SELECT操作, ...

  3. this.AcceptButton = button1的用法:

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. IF与SWITCH

    今晚刚刚看了一点儿<大话设计模式>这本书,看到它示例的第一个程序,好像有点理解IF与SWITCH的区别了.大致的思考了总结出来. IF适用于每个条件都必须判断,就是IF语句中的判断是不同类 ...

  5. Maven 项目依赖 pom 文件模板

    下面是网上down的 pom 文件模板: <!-- 属性 --> <properties> <spring.version>4.2.4.RELEASE</sp ...

  6. bzoj2820-GCD

    题意 \(T\le 10^4\) 次询问 \(n,m\) ,求 \[ \sum _{i=1}^n\sum _{j=1}^m[gcd(i,j)\text { is prime}] \] 分析 这题还是很 ...

  7. C++函数中的那些坑

    平时写程序时,我们可能或多或少对一些用法感到朦胧,下面我对一些易困惑大家,或者易用错的地方作点介绍. 一.函数的一些注意点 1.函数返回类型不能是数组类型或函数类型,但可以是指向数组或函数的指针. 2 ...

  8. Proving Equivalences UVALive - 4287(强连通分量 水题)

    就是统计入度为0 的点 和 出度为0 的点  输出 大的那一个,, 若图中只有一个强连通分量 则输出0即可 和https://www.cnblogs.com/WTSRUVF/p/9301096.htm ...

  9. 【纪念】NOIP2018后记——也许是一个新的起点

    如果你为了失去太阳而哭泣,那么你也将失去星星和月亮. —— 泰戈尔<飞鸟集> NOIP结束了,我挂了一道题……曾经在心中觉得怎么都不会考到的分数,就这么冷冷的出现在了我的成绩单上.的确是比 ...

  10. [AT2148] [arc063_c] Integers on a Tree

    题目链接 AtCoder:https://arc063.contest.atcoder.jp/tasks/arc063_c 洛谷:https://www.luogu.org/problemnew/sh ...