css sprite技巧详解（CSS精灵）

最新推荐文章于 2025-04-27 14:59:52 发布

Gs_Yu

最新推荐文章于 2025-04-27 14:59:52 发布

阅读量1.3k

点赞数

分类专栏： HTML CSS

HTML 同时被 2 个专栏收录

9 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

原文章地址：http://www.dayday28.com/css-sprite

CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。　　加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

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

下面我就详细的讲解下他的使用技巧，包你现在不懂的童鞋会有个清楚的全新了解，虽然目前有这样的工具，但是还是要先清楚他的原理，技巧性的来做也会很快速的完成定位，下面我分享加个案例。

首先跟大家说明一点，由于需要定位的背景都是合并在一张图的，所以都是一刀切的，要么是X轴坐标一致要么是Y轴坐标一致，也就有了我下面要讲述的2种类型了。

1。横向定位坐标

横向定位坐标意思就是Y轴坐标固定,它的特点就是每个图标的高度是一致的，通过改变x坐标的位置来改变背景。只需测量每个图标的宽度就可以知道x轴的坐标了。如果你还不知道这个规律，下面我就讲解给你听吧，下面拿我做的2个案例来说事。

效果图：

实际背景图：

那么具体来讲解怎么来定位，这里是改变X坐标来定位。

由于高度都是一样所以Y轴上的坐标都是0或top

这里每个图标我是用一个span做背景的，下面具体分析下代码：

           <
           div 
           class
           =
           "join c"
           > 
          

                       
           <
           strong
           >Join us on:</
           strong
           > 
          

                       
           <
           ul 
           class
           =
           "c"
           > 
          

                           
           <
           li
           ><
           a 
           href
           =
           "https://www.facebook.com/Fancyladies"
           ><
           span 
           class
           =
           "sl"
           >Facebook</
           span
           ><
           span 
           class
           =
           "sharelogo facebookLogo"
           ></
           span
           ></
           a
           ></
           li
           > 
          

                           
           <
           li
           ><
           a 
           href
           =
           "http://pinterest.com/fancyladies/ "
           ><
           span 
           class
           =
           "sl"
           >Pinterest</
           span
           ><
           span 
           class
           =
           "sharelogo pinterestLogo"
           ></
           span
           ></
           a
           ></
           li
           > 
          

                           
           <
           li
           ><
           a 
           href
           =
           "https://twitter.com/fancyladiescorp"
           ><
           span 
           class
           =
           "sl"
           >Twitter</
           span
           ><
           span 
           class
           =
           "sharelogo twitterLogo"
           ></
           span
           ></
           a
           ></
           li
           > 
          

                           
           <
           li
           ><
           a 
           href
           =
           "http://www.flickr.com/photos/fancyladies"
           ><
           span 
           class
           =
           "sl"
           >flickr</
           span
           ><
           span  
           class
           =
           "sharelogo flickrLogo"
           ></
           span
           ></
           a
           ></
           li
           > 
          

                           
           <
           li
           ><
           a 
           href
           =
           "http://www.youtube.com/user/fancyladiescom"
           ><
           span 
           class
           =
           "sl"
           >Youtube</
           span
           ><
           span 
           class
           =
           "sharelogo youtubeLogo"
           ></
           span
           ></
           a
           ></
           li
           > 
          

                           
           <
           li
           ><
           a 
           href
           =
           "http://www.fancyladies.com/blog/"
           ><
           span 
           class
           =
           "sl"
           >Blog</
           span
           ><
           span 
           class
           =
           "sharelogo blogLogo"
           ></
           span
           ></
           a
           ></
           li
           > 
          

                       
           </
           ul
           > 
          

                   
           </
           div
           >
          

下面是Css code:

.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}

.facebookLogo{background-position:0 0;width:20px;}

.pinterestLogo{background-position:-20px 0;width:42px;}

.twitterLogo{background-position:-62px 0;width:30px;}/**/

.flickrLogo{background-position:-92px 0;width:130px;}

.youtubeLogo{background-position:-222px 0;width:98px}

.blogLogo{background-position:-320px 0;width:84px;}

.sl{float:left;padding-right:10px;}

他们的背景图片都是公用这一张背景：background-image:url(../images/shareIcon.jpg);

每个元素的背景都不允许重复：即：background-repeat:no-repeat;

读到这里你有发现一个规律，就是每个元素的坐标等于前面元素的坐标值加上宽度。即元素的横向坐标值公式等于。相邻元素的坐标值加上宽度。

pinterestLogo 的值等于facebookLogo的坐标值20px+facebookLogo的宽度20px ;是不是很简单啊，只要你知道元素的宽度就可以，因为横向坐标等必须要给个固定的宽度，所以这一步测量宽度不是浪费时间。希望仔细看源码中坐标值的规律。

不管是横向定位与纵向定位坐标的时候，他们的起始位置都是background-position:0 0;而横向定位的时候高度是固定的，所以每次只需改变X坐标的值就实现了。

比如facebook的logo是起始位置的图标，所以它的坐标值是0,0，就实现了它的定位。

那么pinterest的logo是它的下面一个，就是从facebook的宽度负值算起。由于facebook的宽度是21px;所以pinterest的logo坐标就是background-position:-20px 0; 下面以此类推

twitterLogo 是pinterstLogo的下面一个，那么就是用pinterstLogo的坐标值加上pinterstlogo

的宽度,就得到了twitterLogo的坐标位置了。就是-（20px+42px）=-62px;即twitterLogo 的坐标值为.twitterLogo{background-position:-62px 0;width:30px;}

读到这里你有发现一个规律，就是每个相邻元素的坐标等于前面元素的坐标值加上它前面元素的宽度。即元素的横向坐标值公司等于。相邻元素的坐标值加上它的宽度。好了下面讲第二种方案了。

2.纵向定位坐标

纵向定位坐标就是X轴坐标固定，改变Y轴坐标值来实现背景的改变，他们的宽度是固定的，所以他们的X轴坐标始终都是相同的，即0或left。下面我分享个案例

效果图：

实际背景图片：

Css code:

           <!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
           >无标题文档</
           title
           > 
          

           <
           style 
           type
           =
           "text/css"
           > 
          

           ul{margin:0;padding:0;float:left;width:32px;} 
          

           ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;} 
          

           .f{background-position:0 0;height:32px;} 
          

           .p{background-position:0 -32px;height:20px}/*Y轴坐标等于起始位置的高度 即：-（0+32）*/ 
          

           .fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度,即：-（32+20） */ 
          

           .h{background-position:0 -84px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度*即：-（52+32）*/ 
          

           .t{background-position:0 -116px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度，即：-（84+32）*/ 
          

           </
           style
           > 
          

           </
           head
           > 
          

                                                                                                        
          

           <
           body
           > 
          

           <
           ul
           > 
          

                                                                                                        
          

           <
           li 
           class
           =
           "f"
           ></
           li
           > 
          

           <
           li 
           class
           =
           "p"
           ></
           li
           > 
          

           <
           li 
           class
           =
           "fr"
           ></
           li
           > 
          

           <
           li 
           class
           =
           "h"
           ></
           li
           > 
          

           <
           li 
           class
           =
           "t"
           ></
           li
           > 
          

           </
           ul
           > 
          

           </
           body
           > 
          

           </
           html
           >
          