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;
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;}
提示:你可以先修改部分代码再运行。
而使用CSS Sprites技术把网页中用到的三张图片整合到一张图片文件中,再利用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;}
提示:你可以先修改部分代码再运行。
上面代码:
css background属性:url()里是背景图片路径;两个数值参数,第一个参数表示距左多少px,第二个参数表示距上多少,no-repeat表示背景图片向哪个方向重复,此时为不重复。 定位图片位置的参数是以图片的左上角为原点的,理解了这些,CSS Sprites技术就基本上懂了,是靠背景图片定位来实现的。
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4149.html