文章目录

  • 一、精灵技术需求
  • 二、CSS 精灵技术
  • 三、CSS 精灵技术代码示例







一、精灵技术需求



在浏览器中输入网址 , 向服务器发送请求显示某个网页 ,

服务器接受请求 , 将网页数据传递给浏览器 ;



用户访问网站时 , 网页中每张图片都要经过单独请求 , 服务器一次只能传递一张图片给用户浏览器 ,

如果网页图像很多 , 服务器与浏览器会频繁地进行请求和响应 , 这样极大的降低了网页的加载速度 ;



CSS 精灵技术 , 可以有效提高网页加载技术 ;






二、CSS 精灵技术



CSS 精灵技术 可以 将网页中的 背景图片 合成到一张 精灵图 中 , 网页元素 显示 精灵图 中的某个部位的小图 ;

建议使用 Firework 或者 Photoshop 精确测量精灵图的尺寸与其中小图片的元素位置 ;



CSS 精灵技术 的核心就是利用了 背景设置中的 background-position 样式 可以 精确定位要显示图片的位置 ;

  • 设置显示位置 : 设置背景图片显示位置 , 可以从指定 x , y 坐标位置开始显示 ,
  • 设置显示大小 : 同时也可以设置显示大小 , 为盒子设置背景图片 , 如果背景图片很大 , 超出盒子的部分不会显示 ;


下面是设置 CSS 精灵图片部分内容为背景的代码 :

.bg {
			width: 50px;
			height: 50px;
			background: url(bg_sprite.png) no-repeat -157px -107px;
			margin: 100px;
		}

指定的图片在精灵图片中的位置是 157, 107 坐标 , 要想将该位置移动到左上角 , 需要向左移动 157 像素 , 向上移动 107 像素 ;

因此 background-position 属性设置为 -157px, -107px 即可 ;






三、CSS 精灵技术代码示例



使用下面的图片作为精灵图片 ;

【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )_css


在网页中 , 显示 " 下载游戏 " 按钮 ;

将该 精灵图片 拖到 Fireworks 中 , 使用切片工具选中其中的 下载游戏 按钮 ,

  • 先使用切片工具 勾选出一个大概轮廓 ,
  • 然后使用 指针工具 或者 部分选定工具 , 在放大后的界面中微调 ;

最终得到 " 下载游戏 " 按钮的位置和大小 , 该按钮 位置在图片中的 0 , 219 坐标 , 该按钮大小 236 x 128 像素 ;

【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )_前端_02

按钮的大小是 236 x 128 像素 , 因此这里为盒子模型也设置 236 x 128 像素尺寸 ;

按钮图片在精灵图片中的位置是 0, 219 像素 , 这是图片的左上角位置 ;

为盒子模型设置该精灵图片后 , 默认显示的位置是 0, 0 像素 , 也就是左上角的位置 ;

这里就需要将 0, 219 位置的按钮显示到 0, 0 位置 , 将图片向左移动 0 像素 , 向上移动 219 像素 , 即可达到上述要求 ;

为其设置 background-position 属性为 0 , -219 ;



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>CSS 精灵技术</title>
	<style>
		.box {
			/* 按钮的宽高是 236 x 128 像素 */
			width: 236px;
			height: 128px;
			
			/* 按钮图片在精灵图片的 0, 219 位置 */
			background: url(images/css_sprite.png) no-repeat 0px -219px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

执行结果 :

【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )_前端_03