位置：首页>> 网络编程>> 网页设计>> CSS背景图片的运用优化HTTP连接数

CSS背景图片的运用优化HTTP连接数

作者：laos　来源：laos博客　发布时间：2008-09-04 21:38:00　

标签：背景,布局,图片,css

我们日常用CSS布局的时候，关于图片背景，大部分的人都是一个背景一张图片的，怎么说呢？这是很标准的方法，但是这种普通制作方式下要保存大量图片，我们现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

以下我们用建站时做菜单为例！当我们每个菜单时,我们希望默认菜单链接背景图片(a)与鼠标放在链接上时的(a:hover)背景图片不一样，通常我们会采取用两个图片的方法，例如：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>新建网页 1</title><style type="text/css"> test ul{list-style:none;}.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:40px;}.test a{display:block;text-align:center;height:40px;background:url(/file/UploadPic/20089/4/200894214418531.gif) #F00 no-repeat;}.test a:hover{color:#FFF;font-weight:bold;text-decoration:none;background:url(/file/UploadPic/20089/4/200894214418531.gif) #F00 no-repeat;}</style></head><body><div class="test"><ul><li><a href="1">首页</a></li><li><a href="2">产品介绍</a></li><li><a href="3">服务介绍</a></li><li><a href="4">技术支持</a></li><li><a href="5">立刻购买</a></li><li><a href="6">联系我们</a></li></ul></div> </body></html>

那我们应该怎么做才能把它优化起来呢？我们把两张图片合并在一起：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>新建网页 1</title><style type="text/css"> test ul{list-style:none;}.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:40px;}.test a{display:block;text-align:center;height:40px;background:url(/file/UploadPic/20089/4/200894214418699.gif) #F00 no-repeat;}.test a:hover{color:#FFF;font-weight:bold;text-decoration:none;background:url(/file/UploadPic/20089/4/200894214418699.gif) #F00 no-repeat bottom;}</style></head><body><div class="test"><ul><li><a href="1">首页</a></li><li><a href="2">产品介绍</a></li><li><a href="3">服务介绍</a></li><li><a href="4">技术支持</a></li><li><a href="5">立刻购买</a></li><li><a href="6">联系我们</a></li></ul></div> </body></html>

这样做的好处是：

不但减少了你网站的HTTP连接数，还能使访客把鼠标放到你的菜单时，不需要再去加载另外一张图片而浪费时间！更甚至考虑到IIS和防盗链方面的因素，如果你网站上制作的图片实在是太漂亮了，别人在其它网站调用你的图片，就会算是你服务器占用了一个IIS，而这样做别人想盗你的图片，明明是想盗个图标，却要盗一大张图片自己重新切割！我想你也不愿意看见你一大堆的图片文件还要为它们命名吧?

应用以上的方法，你可以把网站所有的背景图片都做成一张图片！再用数值的方法去调用它！
上面的例子应用了方位的参数bottom，当a:hover时,我们让图片以最下面(bottom)显示！
那么以数值的方法去调用它就应该是:

background:url(/file/UploadPic/20089/4/200894214418699.gif) #F00 no-repeat 0 -40px;

图片本身的宽度为100px，高度为80px！我们用数值去设置就应该是“从左边开始为0，从上面开始为-40px”！

投稿

CSS背景图片的运用优化HTTP连接数

猜你喜欢