实例浅析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>