【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )
【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | 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 精灵技术代码示例
使用下面的图片作为精灵图片 ;
在网页中 , 显示 " 下载游戏 " 按钮 ;
将该 精灵图片 拖到 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>执行结果 :
