一、无图片技能界说

在不运用CSS Image（经过CSS的引进的布景图片,不包括img标签内的图片）情况下生成相似图片作用的技能；换句话的意思就是在运用纯CSS生成相似图片作用的技能。

二、为什么要“无图片”？

首要咱们经过yslow的statistics检查新浪微博最新版主页的文件，得到Stylesheet File(CSS文件)巨细为206.8K, CSS Image巨细为623.8K。显着发现CSS文件比CSS Image小许多。

当然单纯拿这两个来比，还不能阐明什么。

下面咱们经过核算来说下CSS文件与CSS Image联系

CSS Image是由一系列的图片组成，每一张图，即便最小一个小箭头（如下图），你存成一张图片，怎样也得1KB吧。

例如微博的这个小三角图形：

假如咱们悉数以CSS的办法模仿这个小箭头，空间资源会占多少？咱们来核算一下，首要贴下代码

HTML代码如下：

CSS代码如下：

从上面的代码能够看出，在CSS文件中一共不到200个字符，假如咱们依照1字符等于1B的来核算的话，200个字符大约等于0.2KB，比直接用图片做节省了4/5的下载资源，显着削减恳求资源的巨细。假如咱们尽可能的运用无图片技能来完结，显着能够进步页面的加载速度；其次，咱们知道每一个CSS image都需求一个http恳求去加载，浏览器每次宣布的恳求个数是有限的，削减CSS image的个数，明显削减了http恳求数，也就进步页面的出现速度；再次，常常运用微博的同学都知道，微博是能够换肤，假如运用CSS无图片技能，咱们仅需求简略换一下CSS特点就能完结换肤，进步了代码的可保护性。

经过以上剖析，运用CSS无图片技能，能够总结得到以下3个长处：

削减恳求资源的巨细

削减http的恳求个数

进步可保护性

三、CSS无图片技能，微博中有哪些实践运用呢？

经过上面的展现，咱们能够看到，无图片技能，在微博上运用对错常遍及的。

四、无图片技能的完结办法

大约有四种办法：一是经过background-color、border生成图片；二是经过字符生成图片；三是经过CSS3 的gradient等生成图片（这个要考虑初级浏览器不兼容的问题）；四是CSS3的自界说字体(@font-face)生成图片。

运用CSS的background-color、border特点能够生成一些图形，例如三角。朴实的CSS2的内容，彻底能够兼容IE6。

1）用background-color生成的小方块，作用如下：

CSS代码：

2）用border生成的小方块，作用如下：

CSS代码：

3）用border生成的小三角，作用如下：

CSS代码：

4）用border生成的尖三角，作用如下：

CSS代码：

5）用border生成的斜三角，作用如下：

HTML结构：

CSS代码：

经过以上5种图形，能够得到以下图形，作用图如下。

这儿只贴一下中心图形的代码，其他的，要爱好的同学能够自己去研讨，更多有意思的图形等着你去完结。

HTML结构：

CSS代码：

2．经过字符生成图片，例如尖角、圆点以及箭头，这也是CSS2领域，彻底能够兼容ie6。这个在博中运用广泛，这儿不独自写demo了。

1）尖角，作用图如下

HTML结构：

CSS代码：

2）圆点，作用图如下

HTML结构：

CSS款式：

3）箭头，作用图如下

HTML结构：

CSS款式：

微博名人堂没做详细的界说，可是主张能够对字体款式做些约束，以便在各种浏览器体现相同。

3．CSS3生成图片，运用box-shadow，border-radius，gradient突变等CSS3的新特点生成图形，IE浏览器下突变布景的运用需求运用IE的突变滤镜，可是运用滤镜资源会耗费很大，所以，依据项目实践情况去权衡是否运用滤镜。

先看下谷歌查找按钮的比如

CSS款式：

GOOGLE查找这个按钮没有运用滤镜，IE浏览器就没有做突变处理，咱们都知道GOOGLE对错常介意功能的公司，有些时分为了极致的功能，略微献身一下视觉体会也是能够承受的。

再看一下淘宝网“检查更多”的按钮

CSS款式：

淘宝网这个按钮运用滤镜，能够完美兼容IE，当然这也不能去猜想淘宝不重视功能，只能说视觉体会和功能博弈的成果。

4. CSS3的自界说字体(@font-face)生成图片，尽管这个办法不属于真实含义的无图片，可是简单修改和保护，更重要的是它的尺度，色彩能够经过CSS来操控，这间接地做到少运用图片。

详细运用，微博微吧的ICON

HTML结构：

CSS款式：

至于详细完结办法的理论基础，要打开写，又是一篇文章，有爱好的同学参阅一下@神飞写的《CSS3 icon font彻底攻略》http://www.qianduan.net/css3-icon-font-guide.html。

总归，CSS无图片技能，是咱们在写CSS款式中需求构成的一种理念，我不必死磕无图片技能，要在实践的项目权衡利弊，依据实践情况，灵活运用无图片技能做一些合理有用的功能优化。