乐趣区

关于css3:CSS-Sprites

CSS Sprites 在国内很多人叫 css 精灵,是一种网页图片利用解决形式。它容许你将一个页面波及到的所有零星图片都蕴含到一张大图中去,这样一来,当拜访该页面时,载入的图片就不会像以前那样一幅一幅地缓缓显示进去了。

利用 CSS 的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position 能够用数字准确的定位出背景图片的地位。

长处:

(1) 利用 CSS Sprites 能很好地缩小网页的 http 申请,从而大大的进步页面的性能,这也是 CSS Sprites 最大的长处,也是其被广泛传播和利用的次要起因;

(2)CSS Sprites 能缩小图片的字节,如果屡次用 3 张图片合并成 1 张图片的字节和这 3 张图片的字节总和, 相比拟, 后果总是前者较小.

(3) 解决了网页设计师在图片命名上的困扰,只需对一张汇合的图片上命名就能够了,不须要对每一个小元素进行命名,从而进步了网页的制作效率。

(4) 更换格调不便,只须要在一张或少张图片上批改图片的色彩或款式,整个网页的格调就能够扭转。保护起来更加不便。

毛病

(1)图片合并麻烦:图片合并时,须要把多张图片有序的正当的合并成一张图片,并留好足够的空间避免版块呈现不必要的背景。

(2)图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会呈现背景断裂。

(3)图片定位繁琐:开发时须要通过工具测量计算每个背景单元的准确地位。

(4)可维护性差:页面背景须要少许改变,可能要批改局部或整张已合并的图片,进而要改变 css。在防止改变图片的前提下,又只能(最好)往下追加图片,但这样减少了图片字节。

退出移动版