CSS设计中的background-position背景定位
css
2009-09-25 15:11
background-position:-160px -156px;
background-position 所定义的两个数值分别为背景图片相对于对象左上角的坐标位置
（坐标不动，背景在动）
<!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" />
<style type="text/css">
div{ cursor:pointer;}
.a1{ background:url(3.png); height:21px; width:100px; background-position:0px 0px; }
.a2{ background:url(3.png); height:21px; width:100px; background-position:0px -20px; }
.a3{ background:url(3.png); height:21px; width:100px; background-position:0px -40px; }
.a4{ background:url(3.png); height:21px; width:100px; background-position:0px -60px; }
.a5{ background:url(3.png); height:21px; width:100px; background-position:0px -80px; }
.a6{ background:url(3.png); height:21px; width:100px; background-position:0px -100px; }
</style>
</head>
<body>
<div class="a1"></div><p>
<div class="a2"></div><p>
<div class="a3"></div><p>
<div class="a4"></div><p>
<div class="a5"></div><p>
<div class="a6"></div><p>
</body>
</html>
效果:
-------------------------------------------------------------------------------------------------------------------------------
<!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" />
<style type="text/css">
.a1{ background:url(2.jpg); height:50px; width:100px; background-position:0px 0px; }
.a2{ background:url(2.jpg); height:50px; width:100px; background-position:0px -50px; }
.a3{ background:url(2.jpg); height:50px; width:100px; background-position:0px -100px; }
.a4{ background:url(2.jpg); height:50px; width:100px; background-position:-100px 0px; }
.a5{ background:url(2.jpg); height:50px; width:100px; background-position:-100px -50px; }
.a6{ background:url(2.jpg); height:50px; width:100px; background-position:-100px -100px; }
</style>
</head>
<body>
<div class="a1"></div><p>
<div class="a2"></div><p>
<div class="a3"></div><p>
<div class="a4"></div><p>
<div class="a5"></div><p>
<div class="a6"></div><p>
</body>
</html>
今天专门就这个问题来谈一谈CSS Sprite技术，这是个非常实用的技术，在我们的几本CSS书籍中，都没有深入介绍。今天算是做个补充。
从十年前说起
十年前，网页设计开始逐渐成为一项应用比较比较广的技术，那时制作网页就开始“切图”了。之所以要切图，主要有两个目的：
1：为了使用表格布局，就要把图像切成一个个小部分，分别放到表格中各自的单元格里面。
2：这样做可以使网页打开和显示速度更快。这是为什么呢？原因是，那时候人们主要还是通过33.6K或者54K的电话线拨号上网，速度非常慢，比现在主流的上网速度慢10到40倍，所以把一个比较大的图像分成若干块，这样浏览器在显示的时候 ，就会同时开多个线程，同时下载各个小块，这样可以更充分地利用带宽，其实原理就和“FlashGet快车”等下载软件是一个道理。
十年后又如何？
当今世界上没有什么技术的发展速度，可以和IT技术相比的。十年后的今天，情况已经发生了很大的变化，很重要的一点是上网的速度快了很多，虽然我们还不能和发达国家（甚至我们不甚看得上的韩国）动辄上百兆的入户带宽相比，但是好歹1-2兆的ADSL还是很普及的。当下载速度快了以后，我们考虑的侧重点就不一样了。
1：当浏览器显示一个图像时，所花费的时间实际上由两个部分组成的，通俗来说是“发出请求建立连接的时间”以及“传输图像数据”的时间。在网速很低的时代，前者时间与后者相比可以忽略不计，而当宽带上网以后，后者的时间大幅度的降低了，而前者并没有明显降低，因此前者所占的比例就不能忽略不计了。
2：一个网页上往往需要很多边边角角的很多小图象，比如按钮、圆角、边框等等，这写图像通常本身的大小都非常小，因此他们的传输时间都非常短，反而建立连接的时间无论图像大小，都是一样的，因此“建立连接”花去了整个下载时间中的较大比例。
3：因此，人们就想到了一个方法，把这些小图像都平放在一个大图像中，这样当显示页面的时候，一次就把他们都下载下来了，然后通过CSS仅仅把需要的部分显示在需要的位置，本质上的原理就是“通过减少HTTP请求的次数，达到加快网页打开的速度的目的。”