CSS Sprites:图片整合技术详细案例

江山如画 • 2019年11月5日下午8:18 • 网页制作 • 阅读 2141

CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。介绍了CSS Sprites技术的实现方法，优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。

CSS Sprites的原理：将小图片整合到一张大的图片上，根据具体图标在大图上的位置，给背景定位。

css中用一张背景图做页面的技术有什么优势？

如上图如果一个页面需要用到9张图片，那么对服务器的请求次数就是9次，而使用CSS Sprites:图片整合技术就可以把9张图片放到一张图片上，然后利用“background-image”，“background- repeat”，“background-position”的组合进行背景定位实现同样的效果，这样只对服务器请求一次，图片总大小也由原来的36K缩小到4K。

CSS Sprites:图片整合技术的优点

能够提升网站性能。普通制作方式下的大量图片，现在合并成一个图片，大大减少了对服务器的请求次数，对网站的加载性能有重要影响。

CSS Sprites:图片整合技术缺点

可维护性差，每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置，由于图片的位置需要固定为某个绝对数值，也是一件颇为不爽的事情。这就失去了诸如center之类的灵活性。
也有可能会出现干扰图片的情况。

CSS Sprites:图片适用场合

在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。

CSS Sprites是值得推广的一种技术。尤其适宜用于固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。

CSS Sprites:图片整合技术实例：导航栏的制作

传统制作方法要用到三张图片：

然后设置超链接a的背景图片为第一张，a:hover的background:url(第三张图片地址) 0 0 no-repeat;
a#current 的背景图片 background:url(第二张图片地址) 0 0 no-repeat;

<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; margin-left:2px;} #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(http://www.125jz.com/wp-content/uploads/2019/11/201437212110327.gif) 0 0 no-repeat; font-size:14px;} #menu ul li a:hover { background:url(http://www.125jz.com/wp-content/uploads/2019/11/20143721210670.gif) 0 0 no-repeat;} #menu ul li a#current { background:url(http://www.125jz.com/wp-content/uploads/2019/11/201437212045157.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首页</a></li> <li><a href="#">DIV+CSS</a></li> <li><a href="#">网页配色</a></li> <li><a href="#">建站入门</a></li> <li><a href="#">站长工具</a></li> </ul> </div> </body> </html>

Tips:You can change the code before run.

而使用CSS Sprites技术把网页中用到的三张图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。

<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; margin-left:2px;} #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(http://www.125jz.com/wp-content/uploads/2019/11/201437213732192.gif) 0 -28px no-repeat; font-size:14px;} #menu ul li a:hover { background:url(http://www.125jz.com/wp-content/uploads/2019/11/201437213732192.gif) 0 -56px no-repeat;} #menu ul li a#current { background:url(http://www.125jz.com/wp-content/uploads/2019/11/201437213732192.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首页</a></li> <li><a href="#">DIV+CSS</a></li> <li><a href="#">网页配色</a></li> <li><a href="#">建站入门</a></li> <li><a href="#">站长工具</a></li> </ul> </div> </body> </html>

Tips:You can change the code before run.

上面代码：

css background属性:url（）里是背景图片路径；两个数值参数，第一个参数表示距左多少px，第二个参数表示距上多少，no-repeat表示背景图片向哪个方向重复，此时为不重复。定位图片位置的参数是以图片的左上角为原点的，理解了这些，CSS Sprites技术就基本上懂了，是靠背景图片定位来实现的。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/4149.html

CSS Sprites:图片整合技术详细案例

CSS Sprites:图片整合技术的优点

CSS Sprites:图片整合技术缺点

CSS Sprites:图片适用场合

CSS Sprites:图片整合技术实例：导航栏的制作

99%的人还看了以下文章

CSS常用类/ID命名规范

导航特效：jquery实现当前（活动）菜单样式变化

jquery全选和反选功能代码，兼容所有浏览器

CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

HTML5- Canvas入门（二）画线并设置颜色

手把手，永哥教你学会css sprite（雪碧图）技术

发表回复