简明现代魔法 -> 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;
	}  

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们