srcmini上一章CSS高级教程请查看：css媒体类型
CSS sprite精灵技术是一种通过将图像合并到一个文件中来减少对图像资源的HTTP请求数量的方法。
什么是精灵？
精灵是一种二维图像，它是由小图像定义在X和Y坐标下组合成一个较大的图像。
要显示组合图像中的单个图像，可以使用CSS background-position属性来定义要显示的图像的确切位置。
使用CSS图像精灵的好处
一个包含许多图像，特别是许多小图像的web页面，例如图标、按钮等，加载和生成多个服务器请求需要很长时间。
使用图像精灵而不是单独的图像将显著减少浏览器向服务器发出的HTTP请求的数量，这对于提高web页面的加载时间和站点的整体性能非常有效。
注意：减少HTTP请求的数量对减少响应时间有重要的影响，这将使web页面对用户的响应更迅速。
假设有10张图标和对应的hover图标，用作按钮的背景（10个按钮是不使用sprite的情况，另一种10个按钮使用sprite），你会看到一个明显的区别。当你将鼠标指针放在非sprite版本的浏览器图标上时，悬停图像将在一段时间后出现，这是因为悬停图像是在鼠标悬停时从服务器加载的，因为正常图像和悬停图像是两个不同的图像。
而在sprite版本中，由于所有的图像都合并在一个图像中，所以鼠标悬停时，悬停图像会立即显示，从而产生平滑的悬停效果。
使用CSS sprite技术演示:[例- B];与[示例- A]相比，我们能够减少9个HTTP请求，并将图像的总文件大小减少38.2 KB。对于这样一个小例子来说，这是一个相当大的改进，想象一下你可以在一个完整的网站上做什么。
下面将解释创建此示例的整个过程。
创建图像精灵
我们通过将10个独立的图像合并到一个图像中来制作这个sprite图像(mySprite.png)，你可以创建自己的精灵使用任何图像编辑工具。
提示：为了简单起见，我们使用了所有相同大小的图标，并将它们紧密地放置在一起，以便计算偏移量。
显示图像精灵的图标
最后，利用CSS，我们可以显示我们需要的图像精灵的一部分。
首先，我们将创建类.sprite来加载我们的sprite图像，这是为了避免重复，因为所有项目共享相同的背景图像。
.sprite {
background: url("images/mySprite.png") no-repeat;
}
现在，我们必须为要显示的每个项定义一个类。例如，要显示Internet Explorer图标形式的图像精灵的CSS代码将是。
.ie {
width: 50px; /* Icon width */
height: 50px; /* Icon height */
display: inline-block; /* 显示图标为内联块 */
background-position: 0 -200px; /* 图标背景在精灵中的位置 */
}
现在问题来了，我们如何得到背景位置的像素值？让我们找出答案，第一个值是水平位置，第二个是背景的垂直位置。Internet Explorer图标的左上角触摸左边缘的水平距离图像的起点即左上角是0,因为它是放在第五的位置所以它的垂直距离图像精灵的起点是4 X 50 px = 200 px,因为每个图标都是50 px的高度。
要显示Internet Explorer图标，我们必须将它的左上角移动到起始点，即图像精灵(mySprite.png)的左上角。也因为这个图标放置在200 px的垂直距离,我们需要改变整个背景图像(mySprite.png)垂直上升了200 px,要求我们运用-200 px的值是一个负数，因为负值使它垂直上升而正值使它下降。但是，它不需要水平偏移，因为Internet Explorer图标的左上角之前没有像素。
提示：在接下来的示例中，只需使用background-position属性的值，你将很快了解补偿是如何工作的。
使用CSS图像精灵创建一个导航菜单
在前一节中，我们学习了如何显示图像精灵中的单个图标。这是使用图像精灵的最简单的方法，现在我们更进一步，通过建立一个具有滚动效果的导航菜单，如[例- B]所示。
在这里，我们将使用相同的sprite图像(mySprite.png)来创建导航菜单。
用于导航的基础HTML
我们将从创建一个HTML无序列表的导航菜单开始。
<ul class="menu">
<li class="firefox"><a href="#">Firefox</a></li>
<li class="chrome"><a href="#">Chrome</a></li>
<li class="ie"><a href="#">Explorer</a></li>
<li class="opera"><a href="#">Opera</a></li>
<li class="safari"><a href="#">Safari</a></li>
</ul>
在导航中应用CSS
下面几节将介绍如何使用CSS将上面示例中给出的简单无序列表转换为基于对齐图像的导航。
步骤1：重新设置列表结构
默认情况下，HTML无序列表用项目符号显示，我们需要通过将list-style-type属性设置为none来删除默认项目符号。
ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
步骤2：为每个链接设置公共属性
在这一步中，我们将设置所有链接共享的所有通用CSS属性。例如color, background-image, display, padding等。
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px; /* 从背景图像中筛选文本 */
color: #3E789F;
background: url("images/mySprite.png") no-repeat; /* 由于所有链接共享相同的背景图像 */
}
步骤3：设置每个链接的默认状态
现在，我们必须为每个菜单项定义一个类，因为图像精灵中的每个项都有不同的背景位置background-position。例如，Firefox图标被放置在起始点，即图像精灵的左上角，因此不需要移动背景图像。因此，本例中背景的垂直和水平位置为0。类似地，你可以为图像精灵中的其他图标定义背景位置。
ul.menu li.firefox a {
background-position: 0 0;
}
ul.menu li.chrome a {
background-position: 0 -100px;
}
ul.menu li.ie a {
background-position: 0 -200px;
}
ul.menu li.safari a {
background-position: 0 -300px;
}
ul.menu li.opera a {
background-position: 0 -400px;
}
步骤4：添加链接的悬停状态
添加悬停状态与添加上述链接的原理相同。只需将它们的左上角移动到图像精灵的起始点(即左上角)，就像我们在上面所做的那样。你可以简单地计算背景位置使用以下公式：
悬停状态垂直位置=正常状态垂直位置- 50px
因为滚动图像刚好低于默认状态，每个图标的高度等于50px。图标的悬停状态也不需要水平偏移量，因为它们的左上角之前没有像素。
ul.menu li.firefox a:hover {
background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
background-position: 0 -150px;
}
ul.menu li.ie a:hover {
background-position: 0 -250px;
}
ul.menu li.safari a:hover {
background-position: 0 -350px;
}
ul.menu li.opera a:hover {
background-position: 0 -450px;
}
完成了!这里是我们最后的HTML和CSS代码合并后的整个过程：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>导航菜单使用精灵的例子</title>
<style>
ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px; /* 从背景图像中筛选文本 */
color: #3E789F;
background: url("images/mySprite.png") no-repeat; /* 由于所有链接共享相同的背景图像 */
}
ul.menu li.firefox a {
background-position: 0 0;
}
ul.menu li.chrome a {
background-position: 0 -100px;
}
ul.menu li.ie a {
background-position: 0 -200px;
}
ul.menu li.safari a {
background-position: 0 -300px;
}
ul.menu li.opera a {
background-position: 0 -400px;
}
ul.menu li.firefox a:hover {
background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
background-position: 0 -150px;
}
ul.menu li.ie a:hover {
background-position: 0 -250px;
}
ul.menu li.safari a:hover {
background-position: 0 -350px;
}
ul.menu li.opera a:hover {
background-position: 0 -450px;
}
</style>
</head>
<body>
<ul class="menu">
<li class="firefox"><a href="#">Firefox</a></li>
<li class="chrome"><a href="#">Chrome</a></li>
<li class="ie"><a href="#">Explorer</a></li>
<li class="opera"><a href="#">Opera</a></li>
<li class="safari"><a href="#">Safari</a></li>
</ul>
</body>
</html>
评论前必须登录！
注册