CSS Sprites

CSS sprites 技术是一种通过在单个文件中组合图像来减少为图像资源做出的 HTTP 请求数量的方法。

什么是 Spirtes

Spirtes 是二维图像,其由将小图像组合成在定义的 X 和 Y 坐标处的一个较大图像组成。

要从组合图像中显示单个图像,可以使用 CSS background-position 属性,定义要显示的图像的确切位置。

使用 CSS 图像 Spirtes 的优点

具有许多图像的网页,尤其是许多小图像,例如图标,按钮等,可能需要很长时间来加载并生成多个服务器请求。

使用图像 Spirtes 而不是单独的图像将显着减少浏览器对服务器的 HTTP 请求数量,这对于改善网页的加载时间和整体网站性能非常有效。

注意: 减少 HTTP 请求的数量会对缩短响应时间产生重大影响,从而使网页对用户的响应速度更快。

查看以下示例,你将看到一个明显的区别; 第一次将鼠标指针放在非 Spirtes 版本的浏览器图标上时,悬浮图像会在一段时间后出现,因为悬停图像是在鼠标悬停时从服务器加载的,因为正常和悬停图像是两个不同的图像。

在 Spirtes 版本中,由于所有图像都组合在一个图像中,因此鼠标悬停时会立即显示悬停图像,从而实现平滑的悬停效果。

下面解释 Sprites 工作的整个过程。

制作图像 Spirtes

我们通过在单个图像(mySprite.png)中组合 10 个单独的图像来制作这个 Spirtes 图像。你可以使用你喜欢的任何图像编辑工具创建自己的 Spirtes。

Spirtes 图像图

提示: 为简单起见,我们使用了相同大小的图标,并将它们彼此靠近放置,以便于计算偏移量。

从图像 Spirtes 显示图标

最后,利用 CSS,我们可以只显示我们需要的图像 Spirtes 的一部分。

首先,我们将创建 .sprite 将加载我们的 Spirtes 图像的类。这是为了避免重复,因为所有项目共享相同的背景图像。

.sprite {
    background: url("images/mySprite.png") no-repeat;
}

现在,我们必须为要显示的每个项目定义一个类。例如,要显示 CSS 代码所用的图像 Spirtes 的 Internet Explorer 图标。

.ie {
    width: 50px; /* Icon width */
    height: 50px; /* Icon height */
    display: inline-block; /* Display icon as inline block */
    background-position: 0 -200px; /* Icon background position in sprite */
}

现在问题出现了,我们是如何得到 background-position 像素值的呢? 让我们来看看。第一个值是*水平位置*,第二个值是背景的*垂直位置*。由于 Internet Explorer 图标的左上角触及左边缘,因此其距起点(即图像 Spirtes 的左上角)的水平距离为 0,因为它位于第 *5 个位置,*因此它与图像 Spirtes 起点的垂直距离是 4 X 50px = 200px,因为每个图标的高度是 50px

要显示 Internet Explorer 图标,我们必须将其左上角移动到起始点,即图像 Spirtes(mySprite.png)的左上角。此外,由于此图标位于 200px 的垂直距离,我们需要将整个背景图像(mySprite.png)垂直向上移动 200px,这需要我们将该值应用为 -200px 的负数,因为负值会使其垂直向上,而正值会使其向下移动。但是,它不需要水平偏移,因为 Internet Explorer 图标的左上角之前没有像素。

提示: 只需在即将到来的示例中使用属性值,你就可以快速了解偏移的工作原理。 background-position

使用 CSS Image Sprite 创建导航菜单

在上一节中,我们学习了如何从图像 Spirtes 中显示单个图标。这是使用图像 Spirtes 的最简单方法,现在我们通过构建具有*翻转效果*的导航菜单向前迈出了一步,如 例子 - B 中所示。

在这里,我们将使用相同的 Spirtes 图像(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 cl ass="opera"><a href="#">Opera</a></li>
    <li class="safari"><a href="#">Safari</a></li>
</ul>

在导航上应用 CSS

以下部分将介绍如何将上面示例中给出的简单无序列表转换为使用 CSS 的基于 spite 图像的导航。

第 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 属性。如 colorbackground-image、displaypadding`。

ul.menu li a {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    padding-left: 60px; /* To sift text off the background-image */
    color: #3E789F;
    background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
}

第 3 步:设置每个链接的默认状态

现在,我们必须为每个菜单项定义一个类,因为图像 Spirtes 中的每个项目都有不同的 background-position。例如,Firefox 图标位于起始点,即图像 Spirtes 的左上角,因此无需移动背景图像。因此,在这种情况下,背景的垂直和水平位置将为 0。同样,你可以为图像 Spirtes 中的其他图标定义背景位置。

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 步:添加链接的悬停状态

添加悬停状态具有与添加上述链接相同的原则。只需将它们的左上角移动到图像 Spirtes 的起点(即左上角),就像我们上面所做的那样。你可以使用以下公式简单地来计算 background-position

Vertical position of hover state = Vertical position of normal state - 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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Sprite Navigation Menu</title>
<style type="text/css">
    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; /* To sift text off the background-image */
        color: #3E789F;
        background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
    }
    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>