再谈css sprites技术-如意宝魔方建站平台

再谈css sprites技术

2017-02-21 15:01:01 次浏览

&emsp;&emsp;其实说起来，css sprites算不上一门什么高深的技术，应该只能算是一种技巧吧。在mf1288.com中有关很多相关的介绍，您可以参考。&emsp;&emsp;CSS Sprites工作原理及其对CSS布局的意义、优点和缺点介绍&emsp;&emsp;http://www.mf1288.com/h…

其实说起来，css sprites算不上一门什么高深的技术，应该只能算是一种技巧吧。在mf1288.com中有关很多相关的介绍，您可以参考。

CSS Sprites工作原理及其对CSS布局的意义、优点和缺点介绍
http://www.mf1288.com/help_show.aspx?newsid=325&newstreeid=55&newstypeid=2&trid=
浅谈CSS Sprites技术以及图片优化
http://www.mf1288.com/help_show.aspx?newsid=326&newstreeid=55&newstypeid=2&trid=
也就是通过背景图的定位（background-position ）把页面中所用到的图标、背景图之类的整合到一张整的背景图里，从而大大减少了页面请求数，提高了页面浏览的性能。
其实本民工最初这样用的时候并不知这就叫css sprites，只是看到各大主流站都是这么做于是也效仿而已。比如下面这张图，是腾讯主站背景图的一部分：

定位的样式其实只用一句：

Example Source Code

background: url("your_url.gif") no-repeat x y;
如: background: url("http://www.mf1288.com/logo.png"") no-repeat 100px 200px;

关于CSS中的坐标，图片的最左上角为（0,0）,而定位图片内部的位标的话，x、y都是负值。还有，可以把需要repeat的跟no-repeat的图分开，如果放在一起的话那么就需要考虑一下图片的延展性就可以了。
实现css sprites并不难，只要有点耐心与细心就可以了。在制图的时候建议用Fireworks，他可以把图片精确定位到某个坐标，这是PS做不到的。采用css sprites对页面性能的提升是毋庸置疑的，只是在后期的修改与维护上麻烦了点而已，具体怎么用，可以跟据项目的具体情况来决定了。比如说，本民工的博客就没这样用，因为跟本就没用到几张图片，嘿嘿。

上一条：浅析CSS Sprites技术以及图片优化

下一条：Google谷歌的CSS前景图片合并技术

返回列表

再谈css sprites技术

友情链接：