神奇的CSS sprites，制作特效的新方法

本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death，如果觉得博主讲的含糊不清的话，可以看作者原文。

熟悉了常规切图的我们，在浏览大型网站的时候，有时会忍不住审查元素一下，就会发现他们会把所有的小图标整合在一个图片上，比如谷歌的

而且如果你细心一点，你会发现Google的二级搜索结果页面是底下的分页的那一排o也是用CSS Sprite做的。那么什么是CSS Sprite呢？

CSS Sprites是目前大型网站的图片处理的一种方式，原理主要是将网站上的小图片或者图标整合在一张大图上，在用css的background-position属性通过x/y轴的位置来定位图片，从而减少服务器对图片的请求数目，提高网站的加载速度。当然如果你不做大型网站，不需要精细到加载速度的时候，CSS Sprites也会制作和维护带来一些不必要的麻烦。但是当你掌握其用法时，利用CSS Sprites是可以和轻松的做出一些有趣的特效。

CSS Sprites是如何作用的？

我们用到的工具无非就是css，运用我们的想法写出富有创造力的css。

然我们从原图本身说起，把矩形分为四个部分，我们可以看出来上半部分图片，是链接刚开始的效果，下半部分是我们把鼠标悬停在链接上的效果，我们把鼠标悬停在哪个部分哪个部分就会变色。

HTML代码如下：

<ul id="skyline">

    <li id="panel1b"><a href="#1"></a></li>

    <li id="panel2b"><a href="#2"></a></li>

    <li id="panel3b"><a href="#3"></a></li>

    <li id="panel4b"><a href="#4"></a></li>

</ul>

我们用四个<li>标签和<a>组成了四个不同部分的链接。

应用css

          #skyline{

            width: 400px;

            background-image: url(img/test-3.jpg);

            height: 200px;

            position: relative;

            margin: 10px auto;

            padding: 0;

          }

          #skyline li{

            margin: 0;

            padding: 0;

            list-style-type: none;

            position: absolute;

            top: 0;

          }

          #skyline li,#skyline a{

            height: 200px;

            display: block;

          }

　　注意我们并没有把图片放在链接里而是放在的ul里，一会儿你将看到原因。

我们将a元素设定空白透明但是有限定大小的block用来出发链接活动，通过定位包含它的li元素来定位，如果这里我们直接来定位a元素而不是定位li元素将在老版本的浏览器中出现错误。

定位链接

li元素被绝对定位了（position：abosulute），那么为什么li元素没有出现在浏览器的窗口的上方，被定位的元素有一个怪异却很有用的特性，被绝对定位的后代元素不是相对于浏览器窗口定位，而是相对离它最近的并且position属性为relative的父元素进行定位。所以这里的li元素相对于＃skyline进行定位。

  #panel1b {left:; width: 95px;}

  #panel2b {left: 96px; width: 75px;}

  #panel3b {left: 172px; width: 110px;}

  #panel4b {left: 283px; width: 117px;}

所以通过如上代码我们就将每个li元素分别布局到四个小矩形的位置上，这是我们有了带有链接的图片地图，我们来看一下没有加上:hover时的效果和每个部分加border的效果。

hover效果

接下来我们将通过:hover使隐藏的下半部分图片剪裁一部分的方式显现，那么我们将移动图片使它精确定位呢，接下来就是CSS Sptites了，我们要讲的。

  #panel1b a:hover {

    background: transparent url(test-3.jpg)

    0 -200px no-repeat;}

  #panel2b a:hover {

    background: transparent url(test-3.jpg)

    -96px -200px no-repeat;}

  #panel3b a:hover {

    background: transparent url(test-3.jpg)

    -172px -200px no-repeat;}

  #panel4b a:hover {

    background: transparent url(test-3.jpg)

    -283px -200px no-repeat;}

我们从那里获得的像素值呢，让我们把它拆分一下，第一个数值当然水平方向的值（距离左边），第二个值时垂直方向。垂直方向的数值都是相等的200px，因为图片的高度时400px的，上下半部分各占200px，下边的部分需要向上移动200px才能覆盖上半部分，还有一点就是一般background-position值都是负值，因为背景图都是定位在左上方的。

水平方向的偏移量则是li的宽度，第二个链接的偏移量则是前两个li元素宽度的和，以此类推。

这里是效果

Buttons效果和特殊形状

通过以上的方式我们就可以在把网页上的按钮button应用各种效果，比如原图，我们可以做成这样的样式，方法同上

但是我们遇到不规则图形时，这是可能会出现重叠现象（看效果），这是我们可以在原图上做做文章，拆分为两个hover后的效果图，如图，这是我们正确完整的效果。

巴特西

神奇的CSS sprites，制作特效的新方法

最新文章

热门文章