图像拼合
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量,并节省带宽。
图像拼合 - 简单实例
与其使用三个独立的图像,不如我们使用这种单个图像(”img_navsprites.gif”):
有了CSS,我们可以只显示我们需要的图像的一部分。
在下面的例子CSS指定显示 “img_navsprites.gif” 的图像的一部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.baidu.com</title>
<style>
img.home {
width: 46px;
height: 44px;
background: url(/images/img_navsprites.gif) 0 0;
}
img.next {
width: 43px;
height: 44px;
background: url(/images/img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img class="home" src="/images/img_trans.gif"><br><br>
<img class="next" src="/images/img_trans.gif">
</body>
</html>
运行结果:
实例解析:
<img class="home" src="img_trans.gif" />
-因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像- 宽度:46px;高度:44px; - 定义我们使用的那部分图像
- background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置(左0px,顶部0px)
这是使用图像拼合最简单的方法,现在我们使用链接和悬停效果。
图像拼合 - 创建一个导航列表
我们想使用拼合图