CSS Sprites+CSS3 Icon Font

来源：互联网发布：网络约车平台架构图编辑：程序博客网时间：2024/06/07 11:20

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

CSS Sprites加速的关键，不是降低质量，而是减少个数。

做成Sprites的很大的原因是图片流量大，想象一下，如果将一些小图片做成字体模式进行显示，会不会很神奇呢？随着CSS3对字体样式的不断丰富，即便在中文网页中对font-face赋于了新的应用场景，那就是用Icon Font代替页面中的图片。现在通常所指的Icon Font，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。

使用字体来实现图标就有很多优势：字体文件小，一般20-50kb；矢量性，在不同的分辨率屏幕上适配缩放不失真；容易编辑和维护，尺寸和颜色可以用 css来控制，可以添加一些视觉效果如：阴影、旋转、透明度；透明完全兼容IE6；还不用为sprite icon中的inline-block的兼容性烦恼等等。

由于是字体，所以只支持图片上是纯色的，多种颜色的就不支持了；而且很多图片的效果Icon Font很难很好的实现，所以将二者结合是现在很多公司的做法，如：APPLE、淘宝等。

一.CSS Sprites

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

1.制作CSS Sprites图片：

1）.制图工具

专业制图包括Photoshop、fireworks等，这里不再叙述如何制作。

还有一些制作Sprites图片的网站，如：http://css.spritegen.com/。直接上传需要组合的图片，自动组合，并生成代码；但不能根据自己的需要更改图片的位置。

2).制图的思想

CSS Sprites 技术要点总结：
1）. 小图片整合时，按照从上到下的顺序，而不要从左到右排列。
这样排列 background-position 的值一目了然，写 css 时方便许多。同时也是为了后期维护着想。想象一下，如果后期维护时，修改其中某个图片的尺寸，那么周围的所有元素的background- position 就会随之改变，这将会是一件很头疼的事情。
2）. 小图片整合时尽量靠最左边戒者最右边。
这两个位置很灵活，非常适合摆放文本前的 icon，再写样式时不会受到其它 CSS Sprites 图片干预。综合第 1 点，我们可以沿着最左边和最右边的两侧开始由上至下整合图片。
3）. 不建议在不同小图片上下留间隔。
因为这样会导致图片 size 增大从而增加文件的大小。当然，也要给每个图片足够的空间，因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。
4）.图片对等合并
应用CSS Sprites图片时，适当地把对等相同的图像合并，以节省空间及减少体积。
5）. 把图片中颜色较近戒相同的组合在一起可以降低颜色数
少色数的图片文件体积会相对的小。
6）.在Sprites中把图片放在它要显示的地方的相对的位置
如果我们希望一个图片出现在一个元素的左侧，将那个图片放到 sprite 图片的右边，如图
这样的话，当你通过CSS 移劢背景图片的位置的时候，基本上不会有其它的图片出现在它的附近。
7）. background-position定位时避免使用 bottom 或 right 等
使用像素的位置来，当增加或变更图片元素时不用修改。
8）.图片优化：将图片转成 png8 格式
图片体积及尺寸方面，建议体积保持在100K以内，size为800px(最佳尺寸)。

2.使用CSS Sprites

源代码下载：https://github.com/cnblogs-/css-sprites-demo

使用CSS Sprites建立demo示例，效果如下：

1）Sprites文件

slice

2）实现代码：

新建demo.html，代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>切片demo</title>    <link rel="stylesheet" type="text/css" href="style/basic.css"></head><body>    <div id="header">理解切片</div>        <div id="slice">    <h1><a href="###">更多</a></h1>    <div>        <h2>CSS Sprites + CSS3 Icon Font</h2>        <dl>            <dt><img src=http://www.update8.com/Web/CSS3/"images/v1.jpg" alt="CSS Sprites+CSS3 Icon Font" /></dt>            <dd>CSS Sprites<br>CSS3 Icon Font</dd>        </dl>        <ul>            <li><em>[02-08]</em>制作CSS Sprites图片 </li>            <li><em>[02-08]</em>使用CSS Sprites </li>            <li><em>[02-08]</em>什么是Icon Font </li>            <li><em>[02-08]</em>如制作Icon Font </li>            <li><em>[02-08]</em>如何使用Icon Font（依据Iconfont） </li>        </ul>    </div></div>    </body></html>

建立basic.css，代码如下：

* {    padding:0;    margin:0;}body {    font-size:12px;    background:#fff;}#header {    font-size:30px;    font-weight:bold;    text-align:center;    margin:30px;}#slice {    width:400px;    height:415px;    background:url(../images/slice.gif) no-repeat -454px 53px;    margin:0 auto;}#slice h1 {    font-size:12px;    width:400px;    height:42px;    background:url(../images/slice.gif) no-repeat -454px -13px;    padding-top:7px;}#slice h1 a {    width:45px;    height:23px;    display:block;    margin-left:auto;    background:url(../images/slice.gif) no-repeat -798px -230px;    text-align:center;    line-height:23px;    color:#fff;    font-size:12px;    text-decoration:none;    margin-right:9px;}#slice div {    width:400px;    height:340px;    background:#fff url(../images/slice.gif) no-repeat -32px -14px;    padding-top:10px;}#slice div h2 {    width:371px;    height:31px;    background:#fff url(../images/slice.gif) no-repeat -466px -91px;    font-size:12px;    margin:0 auto;    text-align:center;    line-height:31px;    color:#fff;    margin-bottom:10px;}#slice div dl {    width:137px;    height:144px;    background:#fff url(../images/slice.gif) no-repeat -495px -171px;    margin:0 auto;    padding-top:8px;}#slice div dl dt {    width:121px;    height:108px;    background:#fff url(../images/slice.gif) no-repeat -658px -189px;    margin:0 auto;}#slice div dl dt img {    width:119px;    height:91px;    display:block;    margin:0 auto;    padding-top:1px;}#slice div dl dd {    text-align:center;    padding:4px 4px 0 4px;    color:#fff;}#slice div ul {    list-style-type:none;    width:90%;    margin:10px auto;    line-height:200%;    color:#666;}#slice div ul li {    padding-left:15px;    border-bottom:1px dashed #666;    background:#fff url(../images/slice.gif) no-repeat -456px -140px;}#slice div ul li em {    float:right;    font-style:normal;}

3.CSS Sprites使用分析

1）网易163邮箱登陆

163

163的Sprites文件

clipboard[4]

登陆的html代码：

<div class="loginFormBtn"><button id="loginBtn" class="btn btn-main btn-login" type="submit" tabindex="6">登  录</button><a id="lfBtnReg" class="btn btn-side btn-reg" tabindex="7" target="_blank" href="http://reg.email.163.com/mailregAll/reg0.jsp?from=163mail_right">注  册</a></div>

登陆引用Sprites图片的CSS代码:

.themeCtrla, .loginFormIpt, .headerIntro, .verify-input-line, .themeText li, .btn, .btn-moblogin, .ico, .locationTestTitle, .verSelected, .servSelected, .locationTestTitleClose, #extText li, #mobtips_arr, #mobtips_close {
background-image: url("/web/UploadPic/2015-3/201531723653187.png");
}

0 0