css sprites——CSS精灵

简介

CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

举例

我们仅仅只需要制作一个扑克牌，拿黑桃10为例子。这也是css sprites的一个中心思想，就是把多个图片融进一个图里面。

这就是融合后的图，相信对PS熟悉的同学应该很容易的理解，通过PS我们就可以组合多个图为一个图。

现在我们书写html的结构：

<div class="card"><div class="front"><b class="N1 n10"></b><em class="First small_up1"></em><span class="A1 up1"></span><span class="A2 up1"></span><span class="A3 down1"></span><span class="A4 down1"></span><span class="B1 up1"></span><span class="B2 down1"></span><span class="C1 up1"></span><span class="C2 up1"></span><span class="C3 down1"></span><span class="C4 down1"></span><em class="Last small_down1"></em><b class="N2 n10_h"></b> </div>
</div>

在这里我们来分析强调几点:

card为这个黑桃十的盒子或者说快，对div了解的同学应该很清楚这点。

我用span,b,em三种标签分别代表三种不同类型的图片，span用来表标中间的图片，b用来表示数定，em用来表示数字下面的小图标。

class里面的声明有2种，一个用来定位黑桃10中间的图片的位置，一个用来定义方向（朝上，朝下）。

上面是DIV基本概念，这还不是重点，不过对DIV不太清楚的同学可以了解。

下面我们重点谈下定义CSS：

span{display:block;width:20px;height:21px; osition:absolute;background:url(images/card.gif) no-repeat;}

这个是对span容器的CSS定义，其他属性就不说了，主要谈下如何从这个里面来理解css sprites。

背景图片，大家看地址就是最开始我们融合的一张大图，那么如何将这个大图中的指定位置显示出来呢？因为我们知道我们做的是黑桃10，这个大图其他的图像我们是不需要的，这就用到了css中的overflow:hidden;但大家就奇怪了span的CSS定义里面没有overflow:hidden啊，别急，我们已经在定义card的CSS里面设置了（这是CSS里面的继承关系）：

.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}

理解到这点还不够，还要知道width:125px;height:170px; 这个可以理解成是对这个背景图片的准确切割，当然其实并不是切割，而是把多余其他的部分给隐藏了，这就是overflow:hidden的妙用。

通过以上的部分的讲解，你一定可以充分的把握css sprites的运用，通过这个所谓的“切割”，然后再通过CSS的定位技术将这些图准确的分散到这个card里面去！

PS:

CSS的定位技术，大家可以参考其他资料，例如相对定位和绝对定位，这里我们只能尝试用绝对定位。

补充：

为什么要采取<span class="A1 up1"></span>这样的结构？

span这个容器是主要作用就是存放这张大的背景图片，并在里面实现”切割“，span里面切割后的背景是所有内容块里面通用的！

后面class为什么要声明2个属性？

很显然，一个是用来定位内容块的位置，一个是用来定义内容块中的图像的朝上和朝下，方位的！

优点

我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

缺点

至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。

总结

性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。

附上黑桃10的完整源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作一幅扑克牌--黑桃10</title>
<style type="text/css">
<!--
.card {width: 125px;height: 170px;position: absolute;overflow: hidden;border: 1px #c0c0c0 solid;
}
/*中间图片通用设置*/
span {display: block;width: 20px;height: 21px;position: absolute;background: url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif)no-repeat;
}
/*小图片通用设置*/
b {display: block;width: 15px;height: 10px;position: absolute;font-size: 10pt;text-align: center;font-weight: bold;background: url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif)no-repeat;overflow: hidden;
}
/*数字通用设置*/
em {display: block;width: 15px;height: 10px;position: absolute;font-size: 10pt;text-align: center;font-weight: bold;background: url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif)no-repeat;overflow: hidden;
}
/*各坐标点位置*/
.N1 {left: 1px;top: 8px;
}.First {left: 5px;top: 20px;
}.A1 {left: 20px;top: 20px;
}.A2 {left: 20px;top: 57px;
}.A3 {left: 20px;top: 94px;
}.A4 {left: 20px;top: 131px;
}.B1 {left: 54px;top: 38px;
}.B2 {left: 54px;top: 117px;
}.C1 {left: 86px;top: 20px;
}.C2 {left: 86px;top: 57px;
}.C3 {left: 86px;top: 94px;
}.C4 {left: 86px;top: 131px;
}.Last {bottom: 20px;right: 0px;
}.N2 {bottom: 8px;right: 5px;
}
/*大图标黑红梅方四种图片-上方向*/
.up1 {background-position: 0 1px;
} /*黑桃*/
/*大图标黑红梅方四种图片-下方向*/
.down1 {background-position: 0 -19px;
} /*黑桃*/
/*小图标黑红梅方四种图片-上方向*/
.small_up1 {background-position: 0 -40px;
} /*黑桃*/
/*小图标黑红梅方四种图片-下方向*/
.small_down1 {background-position: 0 -51px;
} /*黑桃*/
/*A~k数字图片-左上角*/
.n10 {background-position: -191px 0px;left: -4px;width: 21px;
}
/*A~k数字图片-右下角*/
.n10_h {background-position: -191px -22px;right: 3px;width: 21px;
}
/*A~k数字图片-左上角红色字*/
.n10_red {background-position: -191px 0px;
}
/*A~k数字图片-右下角红色字*/
.n10_h_red {background-position: -191px -33px;
}
-->
</style></head><body><!--10字符--><div class="card"><div class="front"><b class="N1 n10"></b> <em class="First small_up1"></em> <spanclass="A1 up1"></span> <span class="A2 up1"></span> <spanclass="A3 down1"></span> <span class="A4 down1"></span> <spanclass="B1 up1"></span> <span class="B2 down1"></span> <spanclass="C1 up1"></span> <span class="C2 up1"></span> <spanclass="C3 down1"></span> <span class="C4 down1"></span> <emclass="Last small_down1"></em> <b class="N2 n10_h"></b></div></div>
</body>
</html>

css sprites——CSS精灵相关推荐

[css] 你是怎么设计css sprites（精灵图）的？有哪些技巧？
[css] 你是怎么设计css sprites(精灵图)的?有哪些技巧? 首先肯定不会去用PS量,那太费时间了~ 没有webpack以前,用Gulp的gulp.spritesmith插件,这里附上配置 ...
android 精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
css sprite 按钮,CSS Sprites (CSS 精灵) 技术
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
css sprites原理,CSS Sprites (CSS图像拼合技术)教程工具
一篇教程,其源文件可下载学习 Fast Rollovers Without Preload 一个快速翻转效果的例子 CSS Sprites + Rounded corners 另一个例子:使用CSS ...
html css精灵,谈谈CSS Sprites(css精灵)
CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的<CSS Sprites ...
CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图图片合成技术 CSS Spri ...
html中精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
css sprites css精灵
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS 的"background-image","background-repeat&q ...
css sprites 图片精灵自动生成插件
grunt-spritesmith https://www.npmjs.com/package/grunt-spritesmith 转载于:https://www.cnblogs.com/smght/ ...

css sprites——CSS精灵

css sprites——CSS精灵相关推荐

最新文章

热门文章