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

韩曙亮

发布于 2023-04-24 03:22:00

89200

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、精灵技术需求

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

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

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

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

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 精灵技术代码示例

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

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

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

先使用切片工具

勾选出一个大概轮廓 ,

然后使用指针工具或者部分选定工具

, 在放大后的界面中微调 ;

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

按钮的大小是 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>