前端是接近用户体验的一个项目组成部分，合适的优化能够大大减少网页响应时间，合理的资源加载自然成为了工作中的要务，现在就结合实例讲解到底什么是css雪碧图，以及工作中的实际应用。

一 、为什么需要使用雪碧图

比方说现在经理要我们给页面添加一个侧边任务栏，效果如下： 
 
呵呵，作为一名资（too）深（young）的前端，我刷刷刷为页面增加ul还有几个然后再给每个li添加背景图片，哈哈，任务就这么完成了，然后commit了一下自己的代码。此处应该要有代码

html部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>雪碧图实例</title>

    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>

    <ul class="function">

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

</html>
  • css部分
* {

  box-sizing: border-box;

  padding: 0;

  margin: 0;

}

body {

  font-size: 18px;

}

.function {

  list-style: none;

  display: inline-block;

}

.function li {

  width: 40px;

  height: 40px;

  margin-bottom: 5px;

  background: #E0E0E0;

  background-repeat: no-repeat;

}

.function li:nth-child(1) {

  background-image: url(../img/all.png);

}

.function li:nth-child(2) {

  background-image: url(../img/back.png);

}

.function li:nth-child(3) {

  background-image: url(../img/cart.png);

}

.function li:nth-child(4) {

  background-image: url(../img/Category.png);

}

.function li:nth-child(5) {

  background-image: url(../img/close.png);

}

但是等到项目上线的时候，经理说小徐啊，这网页响应有点慢啊！怎么可能！于是我打开chrome按下F12查看network 

我们可以看到这里有几张不到1k的小图片就这点大小还占用了5个请求，网页响应变慢了也不难理解。于是这时候css雪碧图就出现！

二、CSS雪碧图原理及应用

原理：把小图标合成一张大图，通过给元素的公共css设置background-image为该合成图，这样每个元素都会以该合成图为背景，而且页面也只加载一张合成图，然后再给每个元素单独微调其background-position。把多个请求合并成一个。

步骤：

  1. 合并图片 
    首先我们要对图片进行合并，方式有很多种，可以通过gulp，webpack等构建工具或者一些在线工具，这里提供一个很好用的在线的图片合并网站 
    http://csssprites.com/可以根据自己的需要添加边距等等，还会生成对应的参考css

  2. 设置css（此处必须有代码）

* {

    box-sizing: border-box;

    padding: 0;

    margin: 0;

}

body {

    font-size: 18px;

}

.function {

    list-style: none;

    display: inline-block;

}

.function li {

    width: 33px;

    height: 33px;

    margin-bottom: 5px;

    background: #E0E0E0;

    background-image: url(../img/result.png); /*result.png为合并后的图片*/

    background-repeat: no-repeat;

}

.function li:nth-child(1) {

    background-position: 0 0;

}

.function li:nth-child(2) {

    background-position: 0 -35px;

}

.function li:nth-child(3) {

    background-position: 0 -72px;

}

.function li:nth-child(4) {

    background-position: 0 -110px;

}

.function li:nth-child(5) {

    background-position: 0 -145px;

}
  • 效果： 这时候我们再打开chrome的network查看请求数 

    有没有发现呢？原本的5个图片请求变成了1个。这时候我们可以再次自信的跟经理说，问题解决啦！

前端优化：css雪碧图实践应用详解的更多相关文章

  1. css雪碧图（精灵图）与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

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

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

  3. Css雪碧图

    Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

  4. CSS Sprite、CSS雪碧图应用实例

    CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...

  5. CSS雪碧图（精灵图）使用

    1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服 ...

  6. css雪碧图实现数字切换

    vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...

  7. css雪碧图压缩

    cssgaga下载地址 链接: https://pan.baidu.com/s/1Q9xH_XzumIc7vTLCZ3tr5A 提取码: stqe CssGaga功能特性 合并import的CSS文件 ...

  8. css sprite，css雪碧图生成工具V3.0更新

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

  9. css 雪碧图的制作

    很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑) 效果图如下: 代码如下: <html> <head lang="en"&g ...

随机推荐

  1. 3.用less浏览文件内容

    less 命令是一个用来浏览文本文件的程序.纵观 Linux 系统,有许多人类可读的文本文件.less 程序为我们检查文本文件 提供了方便. 什么是“文本” 在计算机中,有许多方法可以表达信息.所有的 ...

  2. 用两个栈实现队列（C++ 和 Python 实现）

    (说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 a ...

  3. pt-index-usage

    pt-index-usage能够从日志当中分析索引的使用情况,并且生成一个报表.下面看一下基本的语法: pt-index-usage [OPTIONS] [FIILE] 打印报告: pt-index- ...

  4. 音乐播放插件Aplayer+WebAPI的使用【附下载】

    本次介绍的是音乐播放器APlayer结合WebAPI的使用,先给各位看下效果:   上面就是APlayer的效果,然后这插件的地址是 https://github.com/DIYgod/APlayer ...

  5. 深入理解JNI 邓平凡

    深入理解JNI 邓凡平 1)使用的时候 :加载libmedia_jni.so 并接着调用JNI_Onload->register_android_media_MediaScanner动态注册JN ...

  6. ANT table表格合并

      1.    合并前提 后台返回数据必须是:相同重复的数据必须是连在一起的,这样前台才能通过rowspan方法合并表格数据.(这是前提,后台需要注意) 2.步骤 1.前台需要根据后台返回的数据内容, ...

  7. 奇葩拿shell + 提权wind08r2奇葩拿shell + 提权wind08r2戏

    0x01 小隐拿站篇 某省还是市级还是县级的空防部 先来刺探目录,拿起御剑, 啪啪啪  (鼓掌)后台出来了   试试弱口令 擦  需要管理员验证码,这个咋玩????这个注入都不用找了,就算注射出账号密 ...

  8. 四、HTTP和HTTPS的区别

    1:简介 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息.HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可 ...

  9. css 17课--

    ---------------------------------------------------------------------------------------------------- ...

  10. 更新UI的几种方式

    在学习Handler的过程中牵涉到UI的更新,在这里就总结一下更新UI的四种方式吧,用法都比较简单,直接看代码就可以了. 一.使用Handler的post方法 新建项目,修改MainActivity代 ...