css精灵sprite – CSS高级教程 css精灵sprite|CSS

上一章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="http://www.srcmini.com/#">Firefox< /a>< /li> < li class="chrome">< a href="http://www.srcmini.com/#">Chrome< /a>< /li> < li class="ie">< a href="http://www.srcmini.com/#">Explorer< /a>< /li> < li class="opera">< a href="http://www.srcmini.com/#">Opera< /a>< /li> < li class="safari">< a href="http://www.srcmini.com/#">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; }

【css精灵sprite – CSS高级教程】完成了!这里是我们最后的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="http://www.srcmini.com/#">Firefox< /a>< /li> < li class="chrome">< a href="http://www.srcmini.com/#">Chrome< /a>< /li> < li class="ie">< a href="http://www.srcmini.com/#">Explorer< /a>< /li> < li class="opera">< a href="http://www.srcmini.com/#">Opera< /a>< /li> < li class="safari">< a href="http://www.srcmini.com/#">Safari< /a>< /li> < /ul> < /body> < /html>