当前位置:jQuery学习 > css > CSS Sprites的使用

CSS Sprites的使用

时间:2010-10-11QQ群:116983258

CSS sprites我们可以简单的理解为CSS图像接合技术,可以使用CSS sprites技术,将多个小图片拼合起来,需要时通过改变position来实现我们想要的结果。使用CSS sprites的好处有以下几点:

  1. 减少了图片个数,这样减小了对服务器的请求。
  2. 整个图片的变小了,使得图片下载速度更快。
  3. 不用使用javascript代码,而是使用纯CSS就可以。

我们以下边一个例子来说明CSS sprites的使用,我们使用的图片如下:

<a id="beauty" href="#" ></a>
#beauty
{
  width:225px;
  height:248px;
  text-decoration:none;
  display:block;
  background-image:url(../images/demo/2010/beauty.jpg);
  background-position:0 0;
}
#beauty:hover,#beauty:active  { background-position:225px 0; }

将光标移动到下图上即可看到我们使用CSS sprites实现的功能。

美女

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/css-sprites.html

大家说了些什么

  1. 1. 让外人 2010-12-21 20:42

    不错!!

所有话题