背景偏移取图标的实现方法

通常为了减少客户端从服务器下载图片的次数，提高服务器的性能，现在比较流行的做法是将多张图片拼合成一张大图片，然后再利用background-posITion属性截取其中的各个小图标，如菜单，表单或导航的小图标等这种技术称为CSS sprite技术，示例代码如下：
htML代码如下：

1. !doctyPE html>     
2. html lang="en">     
3. head>     
4.   meta charset="UTF-8">     
5. title> 背景偏移取图标/title>     
6. link type="text/css" rel="stylesheet" href="1.css"/>     
7. /head>     
8. body>     
9.     div id="name"> name/div>     
10.     div id="psw"> psw/div>     
11.     div id="tel"> tel/div>     
12. /body>     
13. /html>     

1.css代码如下：

1. div    
2.   {     
3.      width:73px;     
4.      line-height:52px;     
5.      height:52px;     
6.      text-align:rightright;     
7.      background:url(images/3.jpg) no-repeat;     
8.      color:white;     
9.     }     
10.  #name    
11.    {     
12.      background-position:-286px -7px; !--向左偏移286px,向上偏移7px-->     
13.   }      
14. #psw     
15.   {      
16.     background-position:-272px -116px;      
17.   }      
18. #tel    
19.  {      
20.     background-position:-535px -230px;     
21.  }     

（要用图片处理工具量出要截取的的图标所要偏移的量，正负代表偏移的方向，正代表向右或向下偏移，负代表向左或向上偏移）

素材图：

最终效果图：

以上这篇背景偏移取图标的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.COM/cyn941105/Archive/2016/07/13/5667923.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！