分类
其他

阿里妈妈 UED 谈 CSS Sprites(CSS 雪碧)技术

CSS Sprites简介

通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites 并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现 CSS Sprites 的影子。但 CSS Sprites 并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。随着 Web 设计向着精致、巧妙的方向发展,设计师们开始考虑使用非 Javascript 的方式制作鼠标滑过、悬停菜单的效果,这时 CSS Sprite 应运而生。

说白了,CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS 的 background-image,background- repeat,background-position 的组合进行背景定位,background-position 可以用数字能精确的定位出背景图片的位置。

当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。