浏览量: | 发布时间:

浅谈html标签优化的CSS Sprites图片优化技术!以下是百度百科css sprites的内容,未经任何修改,请放心学习使用。

浅谈html标签优化之CSS  Sprites图片优化技术

1.CSS精灵简介

国内很多人称cssSprites为CSS sprites,是一种网页图片应用处理方式。它可以让你把一个页面涉及到的所有分散的图片都包含在一个大图中,这样当你访问页面的时候,加载的图片就不会像以前那样一张一张地显示了。以目前网络普及的速度,200KB以下的单幅图片所需的加载时间基本相同,不用担心这个问题。

加速的关键不是降低质量,而是减少数量。传统的剪纸讲究精致。图片尺寸越小,权重越好。其实大小无所谓,电脑是按字节统一的。每当客户端显示一张图片,它就向服务器发送一个请求。所以图片越多,请求越多,延迟的可能性就越大。

2.CSS精灵原则

其实CSS Sprites就是将网页中的一些背景图片整合成一个图片文件,然后利用CSS的“背景-图像”、“背景-重复”、“背景-位置”的组合来定位背景。背景定位可以准确定位带有数字的背景图片的位置。

3.CSS精灵的优缺点

使用CSS Sprites可以很好的减少网页的http请求,从而大大提高网页的性能,这也是CSS Sprites的最大优势,也是其广泛传播和应用的主要原因。

CSS精灵可以减少图片的字节。已经比较过很多次了,三张图片组合成一张图片的字节数总是小于这三张图片的字节数之和。

解决了网页设计者在图片命名上的困惑。它只需要命名一组图片,而不是命名每一个小元素,从而提高了网页的制作效率。

风格很容易改变。只要改变一张或几张图片的颜色或风格,整个网页的风格都可以改变。维护起来更方便。

CSS Sprites确实很强大,但是也有一些不可忽视的缺点,如下:

合并图片时,要有序合理地将多张图片合并成一张图片,并留有足够的空间,防止盘中出现不必要的背景。好在最痛苦的还是宽屏高分辨率屏幕下的自适应页面。如果你的画面不够宽,背景很容易破碎。CSS Sprites开发起来比较麻烦。你得通过photoshop或者其他工具来测算出每个背景单元的确切位置。这是针线活,不难,但繁琐。好在腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites样式生成工具。虽然在使用上还是有些不灵活,但是比photoshop测量方便多了,直接生成,复制,拷贝样式就OK了!

Css精灵维护起来很麻烦。如果页面背景稍有变化,一般就要换这张合并图。不需要改的地方最好不要动,以免改多了css。如果在原来的地方放不下,那就只能(最好)向下添加图片,这样图片的字节会增加,CSS也会改变。

CSS Sprites值得研究和应用,尤其是页面上有大量的ico(图标)。

总之,很多时候我们要权衡利弊,才能决定是否应用CSS Sprites。

4.CSS精灵的使用

有几篇关于CSS Sprites的文章,基本上把它的原理和机制解释的非常清楚。

什么是CSS精灵?

如何创建CSS精灵

用CSS精灵创建翻转效果

用CSS精灵构建动态横幅

关于高性能网站中CSS精灵的内容3.2。CSS精灵

5.CSS精灵的示例。BG _ sprite { background-image : URL(/整个地图地址);背景-重复:不重复}

引用此类.然后在元素中逐个定义背景坐标.以下是关键属性。

#ico1 {width:容器尺寸;Height:集装箱高度;Background:-position:X坐标y坐标}

#ico2 {width:容器尺寸;Height:集装箱高度;Background:-position:X坐标y坐标}

#ico3 {width:容器尺寸;Height:集装箱高度;Background:-position:X坐标y坐标}。nav {width:集装箱尺寸;Height:集装箱高度;Background:-position:X坐标y坐标}

有必要限制容器的大小以符合背景图片中元素的位置.另外.XY轴是相对于整个图片的左上角计算的.所以价值一定要计算清楚。

6.CSS精灵的问题

IE6/Win,背景图片开,cache='检查每次访问' :闪烁!有人提出了解决这个问题的方法,快速翻车无需预载。

关于IE6的闪烁问题,fivesevensix上有一篇非常好的研究文章最小化IE6中闪烁的CSS背景图片。

另外:brunildo的css测试和实验是一个很好的关于CSS各种功能的参考手册和测试工具。