加快网页载入速度-CSS Sprite

CSS Sprites也就是通常说的CSS精灵，是对网页中加载的图片的处理技术。像我们在做网站的时候，不可避免的要加载许多的图片，像一些logo、按钮等。大量的图片会使网页的加载速度大打折扣。CSS Sprites就是允许将一个页面上涉及到所有的零星图片包含到一张大的图片中。这样就降低了图片的个数，起到了加速的效果。下面通过实例来说明CSS Sprite的具体用法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

</script>
<style type="text/css">
    .img{
        background-image:url(4.jpg);
        width:660px;
        height:440px;
    }
    .sprites{
        background-image:url(4.jpg);
        width:254px;
        height:170px;
        background-position:-403px -266px;
    }
</style>
</head>

<body>
    <div class="img"></div>
    <hr/>
    <div class="sprites"></div>
</body>
</html>

为了对比，我们把完整的图片也显示出来：

css代码： .img{ background-image:url(4.jpg); width:660px; height:440px; }。分割一张图片，只要是使用width，height，background-position，用width和height控制图片的大小，background-position来确定要截取的部分的坐标位置。

css:

background-image:url(4.jpg);
    width:254px;
    height:170px;
    background-position:-403px -266px;
}

2014-05-26