简明现代魔法 -> CSS层叠样式表 -> 一个简单的 CSS Sprites 例子

一个简单的 CSS Sprites 例子

2010-01-07

素材图片

效果演示

CSS Sprites并没有一个确定的中文翻译，通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟。CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。

就是这些小地方，也能体现出人性化设计。一个成功的网站，人性化设计是非常重要的。关注人性化设计，是一个网站设计师需要做的事情。

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有单独占用内存，所以被取名为“Sprite精灵”。

CSS 代码

div#tools h5	{
	margin: 0 0 10px 0;
	padding: 0;
	overflow:hidden;
	}

div#tools h5#tools_reference, div#tools h5#tools_quiz {
	text-indent: -9999px;
	width: 120px;
	height: 45px;
	}

div#tools h5#tools_reference a,  div#tools h5#tools_quiz a {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	}

div#tools h5#tools_reference a	{
	background: transparent url(images/site_reference.gif) top left no-repeat;
	}

div#tools h5#tools_reference a:hover	{
	background: transparent url(images/site_reference.gif) 0 -45px no-repeat;
	}

div#tools h5#tools_quiz a	{
	background: transparent url(images/site_quiz.gif) top left no-repeat;
	}

div#tools h5#tools_quiz a:hover	{
	background: transparent url(images/site_quiz.gif) 0 -45px no-repeat;
	}