一、把小图放在一张大图中，先排版好。上几张图看看，就比如这个：

谷歌：

淘宝：

土豆右下角悬浮框：

1、把用到的小图都放到了一张大图里，其中的小图之间的排版是有点规律的，比如说淘宝那张，类似的小图放置成同一列，这样就计算小图显示位置的时候，只要知道第一个小图的位置，同一列的小图，left（X坐标）一样，只需要改top（Y坐标）。这样就方便了许多。

二、使用大图。

在哪个位置需要使用这个小图，就把大图作为background-images插入。然后来根据这个小图的大小调整left 和top。

用到的css属性是background-image、background-position、background-repeat、这几个属性。

或者使用background这个复合属性写在一起就好。

三、我的第一个demo，我一定要实现这样的效果

我先上张图说明我要做什么:

这个例子的意义是让我明白要怎么去显示想要的小图，没有其他的意义了哈哈。

我的思路是，ul li内内嵌一个<div></div>（当然li是块级元素）。

详细的布局代码：

　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

    ul.ul1

    {

        width:200px;

        height:200px;

    }

    ul.ul1 li

    {

        height:40px;

    }

    .star

    {

        width:30px;

        height:18px;

        border:1px solid black;

        display:inline-block;                   /*将对象呈递为内联对象，但是对象的内容作为块对象呈递*/  /*这里使用是为了div跟li能不使用float属性处在同一行，最后div和li对其是用到inline-block属性*/

        vertical-align:top;

        background-image:url(images/minibar.png);                /*显示小图*/

        background-repeat:none;

        background-position:2px -55px;

    }

    .num9

    {

        width:30px;

        height:18px;

        border:1px solid black;

        display:inline-block;

        vertical-align:top;

        background-image:url(images/minibar.png);                /*显示小图*/

        background-repeat:none;

        background-position:-205px -20px;

    }

    </style>

</head>

<body>

<ul class="ul1">

    <li>项目一<div class="star"></div></li>

    <li>项目一<div class="num9"></div></li>

    <li>项目一</li>

    <li>项目一</li>

</ul>

</body>

</html>

小图完整出来了。

心得：

1、书写background-position时一般都是负值，因为是从大图的左上角作为（0,0）点。

2、之前没有学习css sprite之前，是想着怎么把一张大图不要的部分怎么遮挡掉。现在明白了是怎么回事。比如我上面要显示那朵小云，把大图放进div中，然后设置这个div的width和height，再定位一下background-position的位置。最后，大图就只在div中显示我们需要的一小部分。

3、我还要深入学习要怎么把小图排版好成一个大图，更容易测量位置，且不互相干扰。

三、为什么要使用CSS Sprites

减少HTTP请求次数，从而提高了网站性能。

因为假设有6个小图，就有6个HTTP请求，但是如果是放在一个大图里，就只需要1次，因为你要的6个小图都在一张大图里，请求一次后不用再次发送HTTP请求去请求图片资源。

CSS Sprites的详细使用步骤的更多相关文章

  1. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  3. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  4. 【转】CSS Sprites教程大全（使用方法、工具介绍）

    什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...

  5. dataURI V.S. CSS Sprites 移动端

    英文原文:http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/ 中文翻译:http://www. ...

  6. boi剖析 - 基于webpack的css sprites实现方案

    本文是58到家前端工程化集成解决方案boi的博文系列之一.boi是基于webpack打造的一站式前端工程化解决方案,现已开源Github. 作为前端构建工具不可或缺的一个环节,自动生成css spri ...

  7. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  8. CSS Sprites的概念、原理、适用范围和优缺点

    CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...

  9. 什么是css sprites，如何使用？

    css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片.背景图是否重复.背景图定位),显示图片,减轻服务器对图片的请求数量 优点: 1.减少网页的HTT ...

随机推荐

  1. C++指针例

    int num1=15;int num2=22; 状态一://const int *  不可以通过指针改变值,但是可以改变指向的变量//const int *p1=&num1;//std::c ...

  2. python is == 的区别

    要点: is 判断是否是同一个对象.是通过id来判断的    == 是通过值来判断的    为了提高内存利用率对一些简单的对象,如一些数值较小的int对象,python采用重用对象内存的方法 例如指向 ...

  3. ASP 下 能作为json输出后js能解密的 escape 函数

    网络上流传的 vbsEscape UnEscape都只针对asp而言,js传递给asp时可进行转义解码,但asp输出json时如果用这些函数进行编码的话,js是无法正常解码的. 下面是经过实际验证可用 ...

  4. Eclipse右键New菜单项的自定义设置

    大家都知道一般在Eclipse中新建一个项目或者文件都是通过菜单项的File-New来创建,然而有些右键出来的选项可能从来都不会使用到,而有些可能会常用到但是右键中又没有,这个时候就可以自定义New中 ...

  5. 浅析PC机串口通讯流控制

    转自浅析PC机串口通讯流控制 我们在串行通讯处理中,常常看到RTS/CTS和XON/XOFF这两个选项,这就是两个流控制的选项,目前流控制主要应用于调制解调器的数据通讯中,但对普通RS232编程,了解 ...

  6. Entity Framework快速入门--IQueryable与IEnumberable的区别(转载)

    IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IQueryable 接口 ...

  7. 裸眼3D立体显示技术原理详解

    众所周知,现实世界是一个三维空间,除去时间这一维度,现实世界是由长度.宽度和高度三个维度组成,我们每天就生活在这个三维世界中,而现有的显示设备大多数都只能显示二维信息,并不能带给人真实的三维感觉.为了 ...

  8. C++ Socket UDP "Hello World!"

    这是C++ SOCKET网络程序中的C/S结构之UDP "Hello World !",共两个控制台工程: //////////////////////////////////// ...

  9. Application对象的使用-数据传递以及内存泄漏

    Application的使用 What is Application Application和Activity,Service一样是android框架的一个系统组件,当android程序启动时系统会创 ...

  10. VS2013 ASP.NET MVC 修改Web项目的IISExpress的端口固定

    [首先]关闭防火墙,或防火墙开放端口  在解决方案中,右键某项目,属性——Web——服务器——选择IISExpress URL输入:http://localhost:8000/   直接将8000更改 ...