通常为了减少客户端从 服务器 下载图片的次数， 提高 服务器的性能，现在比较流行的做法是将多张图片拼合成一张大图片，然后再 利用 background-pos IT ion属性截取其中的各个小图标，如菜单，表单或导航的小图标等这种技 术 称为CSS sprite 技术，示例代码如下：
ht ML 代码如下：
XM L/HTML Code 复制内容到剪贴板
<!docty PE &nbs p; html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > 背景偏移取图标 </ title > < link type = "text/css" rel = "stylesheet" hr ef = "1.css" /> </ head > < body > < div id = "n am e" > name </ div > < div id = "psw" > psw </ div > < div id = "tel" > tel </ div > </ body > </ html >
1.css代码如下：
CSS Code 复制内容到剪贴板
div { width : 73px ; line-h ei ght : 52px ; height : 52px ; text-align : right right ; background : url (images/3. jpg ) no-repeat ; color : white ; } # name { background-position :- 286px - 7px ;<!--向左偏移 286px ,向上偏移 7px --> } #psw { background-position :- 272px - 116px ; } #tel { background-position :- 535px - 230px ; }
（要用图片处理工具量出要截取的的图标所要偏移的量，正负代表偏移的 方向 ，正代表向右或向下偏移，负代表向左或向上偏移）
素材图：
最终效果图：
以上这篇背景偏移取图标的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://www.cn blog s .COM /cyn941105/ Arch ive/2016/07/13/5667923.html
总结
以上是 为你收集整理的 背景偏移取图标的实现方法 全部内容，希望文章能够帮你解决 背景偏移取图标的实现方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。