合并引用图片的css，提高网站打开速度（转）

转自：https://blog.csdn.net/qqq778899123/article/details/38494219

作为一个开发人员，前后台一并开发是常有的事。多数服务端开发人员不太擅长网页前端开发，所以开发出来的网页说好听点就是简单，说不好听就是不好看。

今天我为大家介绍一个网页图标的合并以及它的使用方法。

首先说下为什么要用图片合并。

一个页面所引用的资源（如页面上引用到的图标）都需要去服务器进行单独获取，如果所引用的资源过多，往往会造成服务器压力过大（这也是为什么有网站会建立图片服务器进行分流的原因）。所以我们可以把需要经常用到的图片进行合并成一张，然后再通过CSS样式进行切割调用。（TIPS.合并后图片大小也会比之前图片总大小小哦）

其次，合并图片格式的选择，在此就不赘述了。网上大神多，给个链接。

看了连接的大概都知道会用什么格式的了。对，就是png的(取它优点背景透明，图片不大）。

现在我们需要的是图片。

PS大神小神可以选择自己做图标，不会的也没关系，去这里找吧http://www.easyicon.net/

比如我现在下载了三个图标，都是24*24像素的。，怎么合并呢？

PS大神小神可以选择自己合并，不会的也没关系，去这里吧。http://csssprites.com/，具体操作自己熟悉，也可以从网上找图片合并软件。如http://78.duote.com.cn/cssjbhb.zip

这两个都挺简单易用的。

合并后的图片如下：24*72像素

现在建立一个CSS样式文件：icon.css，三种状态给它取三个对应名称，分别为help,info,warning。因为这三个图标基本属性都相同，只不过位置不一样，所以我们可以先定义它们的相同属性，再分别定义它们独自的属性。

/*不同class之间用逗号分隔，下面是它们的相同属性*/

 
 

   
   

    
    

   
   
   
   

    
    

     
     .warning,
     
     .info,
     
     .help{
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     width: 
     
     24px;
     
     /*宽度为24像素*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     height: 
     
     24px; 
     
     /*高度为24像素*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     display: inline-block; 
     
     /*让图标与它后面的内容能在同一行显示*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     vertical-align:middle;
     
     /*让图标后面的文字垂直居中*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     background-image:
     
     url(../images/icons.png);
     
     /*合并后图片的相对路径*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     background-repeat:no-repeat; 
     
     /*背景不重复*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

说完它们的相同属性，现在要说它们的不同点——位置了。

首先给大家讲一下位置的属性。

在CSS中，图片的原点（0，0）是在图片的左上角。往右走是负的（X轴），往下走也是负的（Y轴）。

好了，现在给它们定义独自的属性吧。

 
 

   
   

    
    

   
   
   
   

    
    

     
     .warning{background-position: 0 0;}/*感叹号*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .info{background-position: -24px 0;} /*信息*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .help{background-position: -48px 0;} /*帮助*/
    
    
   
   
 
 

background-position后面的两个属性分别代表x轴坐标与y轴坐标。0 0 表示X轴从0开始，Y轴也从0开始。因为之前定义它们相同属性的时候，我们已经为这个class设定了长宽都是24像素，所以它只显示从0开始的24像素内的正方形，这样第一个图形就出来了。

合起来，icons.css的内容就是：

 
 

   
   

    
    

   
   
   
   

    
    

     
     .warning,
     
     .info,
     
     .help{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     width: 
     
     24px;
     
     /*宽度为24像素*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     height: 
     
     24px; 
     
     /*高度为24像素*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     display: inline-block; 
     
     /*让图标与它后面的内容能在同一行显示*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     vertical-align:middle;
     
     /*让图标后面的文字垂直居中*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     background-image:
     
     url(../images/icons.png);
     
     /*合并后图片的相对路径*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     background-repeat:no-repeat; 
     
     /*背景不重复*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .warning{
     
     background-position: 
     
     0 
     
     0;}
     
     /*感叹号*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .info{
     
     background-position: -
     
     24px 
     
     0;} 
     
     /*信息*/
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .help{
     
     background-position: -
     
     48px 
     
     0;} 
     
     /*帮助*/
    
    
   
   
 
 

用法也很简单。

在HTML中加入CSS的引用

<link rel="stylesheet" type="text/css" href="../styles/public/icons.css">
 
 

然后用a标签显示出来，当然也可以用span呀什么的。不过不能用img标签，不然会有边框，有哪位大神能告知解决办法吗？（border:0;border:none;亲测无用）

<a class="info"></a>
 
 

注意a标签中是不能写东西的，即不能这样子：

<a class="info"><span style="color:#6633FF;">这里不能写东西呀！</span></a>