这段时间有几次接触到了css sprites的概念，一个就是在用css做滑动门的时候，另外一个就是在用YSlow分析网站性能的时候，于是对css sprites这个概念产生了浓厚的兴趣。在网上查找了很多的资料，但可惜的是大部分都是只言片语，其中很多都是直接翻译国外的资料，也有直接推荐国外的资料网站，无奈英语没有过关，基本上没有理解到什么css sprites，更别谈如何使用了。

最后还是在蓝色理想中的一篇文章受到启发，琢磨了老半天，才算弄清楚里面的内涵，下面将通过本人的理解帮助其他人更加快速的去掌握css sprites。

先简单介绍下概念，关于它的概念，网上那到处都是，这里简单的提下。

什么是css sprites

css sprites直译过来就是CSS精灵，但是这种翻译显然是不够的，其实就是通过将多个图片融合到一副图里面，然后通过CSS的一些技术布局到网页上。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

下面我们来用一个实例来理解css sprites，受蓝色理想中的《制作一副扑克牌系列教程》启发。

我们仅仅只需要制作一个扑克牌，拿黑桃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个属性？

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

下面我们附上黑桃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>
  <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>
</body>
</html>

css sprites-简单实例让你快速掌握css sprites精髓的更多相关文章

  1. 2个简单实例让你快速理解try-catch的用法

    相信在实际项目中,你可能经常会看到类似下面的代码 try { // 尝试执行代码块 } catch(err) { // 捕获错误的代码块 } finally { // 结果如何都会执行的代码块 } 简 ...

  2. Selenium 2.0 WebDriver 自动化测试 使用教程 实例教程 API快速参考

    Selenium 2.0 WebDriver 自动化测试 使用教程 实例教程 API快速参考 //System.setProperty("webdriver.firefox.bin" ...

  3. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  4. SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  5. css 所有选择器 实例与总结

    目录 什么是选择器? 选择器都有那些呢? 标签选择器 ID选择器 类选择器 后代选择器 子代选择器 组合选择器 交集选择器 相邻兄弟选择器 通用兄弟选择器 属性选择器 伪类选择器 什么是选择器? 在c ...

  6. 【转】精选30个优秀的CSS技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  7. 用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限

    先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自 ...

  8. 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例   投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...

  9. jQuery简单实例

    jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...

随机推荐

  1. Discuz! X2头部header.htm修改指南

    相对于1.5版本,2.0版本并没有在模板机制上做太大改动,基本延续了1.5的模板机制.下面我就为和大家一起过一下X2的头部代码.希望大家对头部代码有些认识. 1.顶部的设为首页,和收藏本站.这里是可以 ...

  2. cat > 命令也可以创建文档

    今天看<Linux/Unix系统编程手册>,发现用cat > 命令也可以直接创建文本文档: cat > testcatcreate.txttesttest [2]+ Stopp ...

  3. HDU 2067：小兔的棋盘

    小兔的棋盘 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  4. c#省市联动

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. Cookie案例

    实现的功能是:在页面上点击,各种书名,跳转到另一个页面,在点解return 回到原来的页面,并且最下面出现刚才点击的书名:进行多次操作,都会出现刚刚点击的书名: 类似于:在浏览器上显示你登录的记录: ...

  6. php时间函数整理

    PHP中的时间函数有这么些:(1)date用法: date(格式,[时间]);如果没有时间参数,则使用当前时间. 格式是一个字符串,其中以下字符有特殊意义:U 替换成从一个起始时间(好象是1970年1 ...

  7. 机器人走方格 V3

    1120 . 机器人走方格 V3   基准时间限制:1 秒 空间限制:65536 KB 分值: 160 N * N的方格,从左上到右下画一条线.一个机器人从左上走到右下,只能向右或向下走.并要求只能在 ...

  8. CentOS 安装Redis

    redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了memcached的不足,它支持存储的value类型相对更多,包括strin ...

  9. FlexCell控件的使用

    private void grid1_GetCellText(object Sender, FlexCell.Grid.GetCellTextEventArgs e) { // 要使用虚表,可以在Gr ...

  10. Linux源代码分析工具链

    前言 看源代码是一个程序员必须经历的事情,也是可以提升能力的一个捷径.个人认为: 要完全掌握一个软件的方法只有阅读源码. 在Windows下有sourceinsight这个源码阅读软件(虽然我没用过, ...