内页Banner背景图
创络讲堂
白色波浪图形
灰色波浪图形 灰色波浪图形
白色波浪图形 白色波浪图形
白色波浪图形 白色波浪图形
白色波浪图形 白色波浪图形
本文于2012-01-31最后更新,距今已超过1年,如不符合现在的实际情况,可联系创络客服获取帮助或查阅近期文章。

做网站的都知道有一种将网站背景图片拼接到一张图片上的技术:CSS Sprites图片整合技术。深圳网站建设公司【创络】大约在两年前的一小段时间内非常痴迷于这种技术的使用。因为它确实可以从很大程度上降低网站服务器的请求次数,从而提高网站的访问速度,然而,为什么我们会很快的放弃这种技术呢?原因是:这样做出来的网站很难维护。

我们先来了解一些和Sprites技术相关的信息,对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果,而且能为你节省10%-30%的文件体积。而Sprites技术就是将网站上的所有图片集成到一张PNG或者GIF图片上去。常见的图片切割技术是图片顺序由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦。SS Sprites图片中的图片都是紧挨在一起的,目的是最大限度的缩小文件体积。把颜色较近或相同的组合在一起可以降低颜色数,因为少色数的图片文件体积会相对的小。

一般我们会采用水平排列图片而非垂直排列,目的当然还是缩小图片文件的体积,因为垂直排列的图片会比水平排列的图片体积要大。适当地把对等相同的图像合并,以节省空间及减少体积。区分开不需要合并的图像。最右或左边为最灵活动位置最适宜摆放文本前的ICO,不会受到其它PNG图片的干预,因此不需要预留空间。

由于整个网站的图片全部都在这一个图片上面,因此,我们需要在每一个DIV中通过精确的position属性来定位。如果有一天客户要求改变某一个DIV的大小,那么整个CSS文档就用全部重新写,这是多么痛苦的一件事情啊?而最令人吃惊的,没有任何一位客户可以保证他在未来不会去修改网站。因此,我们只好选择放弃使用这种技术,转而从其他方面努力提高网站的速度。

上一条 返回目录 下一条
更多阅读选择
相关文章
我们推荐了一些您可能也会感兴趣的文章
客服电话
  • 0755-23698839
  • 134-1757-3710
  • 132-6576-8769
创络建站客服二维码
不出售过期域名
微信咨询