个性化阅读
专注于IT技术分析

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版本中,由于所有的图像都合并在一个图像中,所以鼠标悬停时,悬停图像会立即显示,从而产生平滑的悬停效果。

使用sprite和不使用sprite的区别

使用CSS sprite技术演示:[例- B];与[示例- A]相比,我们能够减少9个HTTP请求,并将图像的总文件大小减少38.2 KB。对于这样一个小例子来说,这是一个相当大的改进,想象一下你可以在一个完整的网站上做什么。

下面将解释创建此示例的整个过程。

创建图像精灵

我们通过将10个独立的图像合并到一个图像中来制作这个sprite图像(mySprite.png),你可以创建自己的精灵使用任何图像编辑工具。

Sprite图像说明

提示:为了简单起见,我们使用了所有相同大小的图标,并将它们紧密地放置在一起,以便计算偏移量。

显示图像精灵的图标

最后,利用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>
赞(0)
未经允许不得转载:srcmini » css精灵sprite – CSS高级教程

评论 抢沙发

评论前必须登录!