如何通过CSS Sprite来实现站内效果

原创
|
浏览：396
|
更新：2014-03-09 21:01

应群里的朋友来写一写智享互联软件站的的“站点关注”一栏效果的实现过程，抽了点时间，赶紧来写，我还是蛮认真的，但是我本身能力有限，代码也没有使用简码，总之是写写本站从无到有的“站点关注”效果实现过程，目的在于加速网页载入。实现最小请求。如何通过CSS Sprite来实现类似本站站点关注的效果？从我看到这几个小图片开始说……

工具/原料

<p>PS软件</p>

方法/步骤

1
首先要将下边的10图片合并到一张图片上 CSS Sprites在线样式生成工具也可以。主要是考虑到复杂的PS合并大家真的不会
2
通过依次上传图片重组得到的全新图片：
2
相关内容未经授权抓取自百度经验
3
background-position的背景定位
4
后台CSS控制（图片命名为result.png）
.about:link, .about:visited{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left ; background-position: 0 -310px;display:block;} .about:hover{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left; background-position: 0 0;display:block;} .msg:link, .msg:visited{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left ; background-position: 0px -372px;display:block;} .msg:hover{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left; background-position: 0px -62px;display:block;} .rss:link, .rss:visited{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left ; background-position: 0px -434px;display:block;} .rss:hover{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left; background-position: 0px -124px;display:block;} .weibo:link, .weibo:visited{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left ; background-position: 0px -496px;display:block;} .weibo:hover{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left; background-position: 0px -186px;display:block;} .deliver:link, .deliver:visited{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left ; background-position: 0px -558px;display:block;} .deliver:hover{float:left; width:52px; height: 52px; margin: 3px 3px 3px 3px; background: url(images/result.png) no-repeat top left; background-position: 0px -248px;display:block;}
5
前端页面调用
<a target="_blank" href="http://www.zhiip.com/about/" title="关于本站" class="about"></a>
<a target="_blank" href="http://www.zhiip.com/leave-a-message/" title="网络留言" class="msg"></a>
<a target="_blank" href="http://feed.feedsky.com/zhiip" title="订阅站点" class="rss"></a>
<a target="_blank" href="http://weibo.com/jalone1990" title="站点微博" class="weibo"></a>
<a target="_blank" href="http://www.zhiip.com/contact/" title="投递本站" class="deliver"></a>
6
到这一部就实现了，这也是一次CSS Sprite的小实践。
END