CSS3 矢量图标及背景精灵

矢量图标浅解

矢量图：根据几何特性来绘制图形。它的特点是放大后图像不会是真，和分辨率无关
位图：是由称作像素（图片像素）的单个点组成的，放大后，会变成马赛克

矢量图标引用

矢量图标和字体的用法一样

font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：
< link rel=“stylesheet” href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：
< span class=“iconfont icon-xxx”>< /span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标题</title><link rel="stylesheet" href="../img/font_51zxw/iconfont.css"><style type="text/css">p{width: 300px; height: 52px; line-height: 50px;margin: 100px auto; border: 1px solid #000;}.icon-V{color: red; font-size: 30px;}</style>
</head>
<body><p><span class="iconfont icon-V"></span>我要自学网QQ</p>
</body>
</html>

Symbol 引用

要控制symbol引用的矢量图标，应该把样式加给外层的svg元素

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：
< script src="./iconfont.js">< /script>
第二步：加入通用 CSS 代码（引入一次就行）：
< style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } < /style>
第三步：挑选相应图标并获取类名，应用于页面：
< svg class=“icon” aria-hidden=“true”> < use xlink:href="#icon-xxx">< /use> < /svg>

背景精灵

背景精灵技术（雪碧图）：就是在一张大图片上集成了很多张小图片上，使用背景定位来显示的图片
背景精灵技术的作用：可以减少向服务器请求的次数，降低服务器的压力，加快浏览器加载
背景精灵使用：背景的图片和背景定位配合使用

百分比背景精灵设置

背景图片横向有多少个，背景图片的宽度就设置成元素宽度的多少倍
背景图片纵向有多少个，背景图片的宽度就设置成元素高度的多少倍
背景图片横向和纵向的个数最好设置成：100/(个数-1)=整数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标题</title><style type="text/css">.bigBox{width: 900px; height: 340px; margin: 50px auto;background: #ccc;}.box{width: 200px; height: 300px; background-color: red;margin: 20px 50px; border-radius: 15px; float: left;background:url(../img/puke.png) no-repeat 50% 100%/500% 300%}#b1{background-position: 0 0;}#b2{background-position: 50% 50%;}#b3{background-position: 100% 100%;}</style>
</head>
<body><div class="bigBox"><div id="b1" class="box"></div><div id="b2" class="box"></div><div id="b3" class="box"></div></div></body>
</html>