实例浅析CSS Sprite

来源：互联网发布：调查报告数据分析模板编辑：程序博客网时间：2024/05/21 15:01

实例浅析CSS Sprite

这段时间有几次接触到了css sprites的概念，经常见到比如一些icons小图标放到一张图里面的情况，不知道是如何被抠出来显示的，一次偶然的机会研究了一下，终于算是比较明白了。

为什么要这样做？因为图片过多会频繁发送http请求，从而降低页面执行的效率。

CSS sprite实现的思想是什么，说白了就是overflow：hidden的一种妙用吧。以实例来做一个参考。

比如我们有这样一张图片：

我们想利用这张图片生成一张黑桃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>

扑克牌的边框是一个以类名为card的div生成的，作为最外层的容器，那么我们来看看这个类的属性。

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

设定了宽高的同时，注意：

overflow:hidden;

这个的意思是，超过该元素框体的部分直接被剪掉不显示，在这里其实没什么用，主要是给下面的子元素继承用的！下面我们看子元素们。

<b class="N1 n10"></b>

就拿第一个<b>来说吧，这其实是左上角的黑桃10，它是怎么显示出来的。

他首先要经过三个阶段：

1：设定从背景上的哪坐标开始框选。我们来看：

.n10{background-position:-191px 0px;}

这个属性

background-position:-191px 0px;

告诉我们从背景图片，以背景图片左上角为原点，即为(0,0)。选取(-191,0)这个点位，作为扣取图片的左上角。也就是黑色的10偏左偏上的位置。OK开始扣抠的点选好了，下面就说说抠多大。

2：决定被抠图片的大小

width:21px;height:10px;

回到<b>的属性，我们看到了width和height，这个的意思就是扣的图片的大小，就像是你用剪切工具，从左上角到右下角剪出21*10这么大的图片。现在这张图已经被抠出来了。接下来就是摆放到什么位置上了。下面我们看<b>里面引入的这个类。

3：决定显示的位置

.N1{left:-4px;top:8px;}

这个类说明了<b>相对于其父元素，也就是<div>的偏移，也就是相距左边-4px，相距顶部8px。这个就是位置。

由此我们可以发现，其实总共经历了不过三步

一：定位抠点

二：决定被抠图片的大小

三：决定显示位置

其他的元素显示方法以此类推。

完整代码如下，有兴趣的童鞋可以尝试一下~

<!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:21px;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:-4px;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:3px;    }    /*大图标黑红梅方四种图片-上方向*/    .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;}    /*A~k数字图片-右下角*/    .n10_h{background-position:-191px -22px;}    /*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>

0 0