技术原理

如何实现CSS精灵增强网页

精灵的概念已经有一段时间了。加速在屏幕上显示动画是游戏行业最常用的技术之一。在本文中,我们将特别关注这项技术如何帮助我们在CSS Sprite的帮助下提高web页面上的用户体验,其顺序如下:

什么是Sprite?什么是CSS精灵-一个快速的概述?它如何帮助Web开发的示例?使用CSS精灵的优势开发人员在使用CSS精灵时必须做什么?如何创建CSS精灵工作表?如何使用CSS精灵?公司使用CSS精灵

什么是精灵一个精灵是一个单一的图像,是一个更大的场景在游戏中的一部分。然后将多个精灵组合成一个称为精灵表的大图像。将精灵工作表加载到内存中后,将快速连续渲染不同的精灵,以产生动画效果。这是同时为数十到数百个不同的精灵在游戏中生成一个场景。

CSS Sprites

基本思想是加载图像并在需要时显示其中的一部分要比加载多个图像并显示它们快得多。

什么是CSS精灵:a快速概述?”CSS精灵是web开发人员用来优化web页面性能的一种技术。在这种技术中,多个通常具有相同尺寸的较小图像组合成一个称为sprite sheet或tile set的大图像。然后,此精灵工作表用于在需要时显示各个元素。

通常,徽标、导航箭头、按钮等元素都包含在精灵工作表中,因为它们几乎具有相同的维度,并且经常在网页中使用。

示例说明它如何帮助web开发“通常,在设计网页时,图像被存储并用作单独的文件。因此,当用户打开网页时,浏览器必须对这些文件中的每个文件发出HTTP请求,分别下载并显示它们。这将导致更高的页面加载时间,因为一个特定的网页可以有大量较小的图像,如按钮、图标、徽标。

How Sprites Helps

CSS精灵帮助开发人员将这些常用的小图像组合成一个大图像。然后,浏览器只需下载一个文件,然后通过偏移图像来显示所需的部分。

使用CSS精灵的优点

使用CSS精灵比普通图像有两个主要优点:

更快的页面加载:提高页面加载时间,如网页一下载就显示出来。

更大的吞吐量和更低的资源使用率:这项技术不仅通过加快页面加载速度改善了最终用户体验,但它也减少了网络拥塞,因为HTTP请求的数量减少了。

开发人员在使用CSS精灵时必须做什么

“当处理单个图像时,开发人员可以简单地处理HTML标记并根据需要在CSS中设置其样式。但是,当使用CSS精灵时,开发人员需要做两件特定的事情:

创建精灵表

在开发网页时如果开发人员决定使用CSS精灵,他/她必须首先通过将所有需要的元素(如按钮、徽标等)合并成网格状模式来创建精灵表。这可以使用任何图像编辑程序,如Photoshop或Gimp来完成。还有许多在线工具可以帮助您制作精灵表。本文稍后将讨论这些工具。

使用CSS背景位置属性

访问sprite的特定元素一旦sprite工作表准备好,开发人员就必须使用CSS属性访问工作表的不同部分。

宽度:sprite宽度高度:sprite高度背景:引用到精灵工作表背景位置:偏移va仅访问精灵工作表

所需部分的值(以像素为单位)如何创建CSS精灵工作表

“您可以使用任何图像编辑软件将较小的图像排列成网格,但下面讨论了两种更简单的方法:

1。联机精灵工作表创建工具

链接:toptal.com/developers/css/sprite-generator/

Online sprite sheet creation tool

此工具不仅可以免费使用,而且还提供了所需的CSS代码,可以在引用sprite工作表时使用。此外,您还可以使用不同的属性,如元素之间的填充和更改它们的对齐方式。

2。使用Sprity

生成Sprite Sheet如果您使用Grunt、Node或Gulp,可以安装一个名为Sprity的包,该包将帮助您创建多种格式的Sprite Sheet,如PNG、JPG等。

首先,您需要使用

npm install Sprity-g安装Sprity

如何使用CSS精灵在本例中,我们将使用下面的精灵表:

work with Sprites

,如上图所示,六个图标(Instagram、Twitter和Facebook)以网格状的模式排列。在第一行,我们有一个正常的状态,在第二行,我们有他们的悬停状态(当我们将鼠标光标悬停在他们身上时出现的图像)。

如果您使用我们上面讨论的工具制作了sprite表,那么您已经知道CSS中需要的偏移量,但是如果您使用了其他工具,或者您只是得到了一些sprite sheet然后不用担心,我们将讨论一种方法,它将帮助您获得所需元素的偏移。

现在让我们看到一种非常简单的方法,通过使用MS Paint为六个图标中的每个图标获取所需偏移。使用精灵可能不是一个理想的解决方案,但由于它具有提供鼠标光标坐标的功能,因此可以使用它来获取所需的X和Y坐标。

首先,打开精灵工作表图像(包含所有较小图像的网格)并将鼠标光标放在精灵的左上角你想抓取。

grid

一旦你有了你的精灵左上角的坐标(左上角的Instagram图片),你可以在任何需要的地方使用CSS代码显示这个特定的精灵:

背景:url('img_精灵.png');背景-位置:0 0;宽125px,高125px;

我们使用的宽度和高度为125像素,因为我们的图标是该维度的。要获取同一行中的下一个图像(Twitter),我们使用以下代码:

background:url('img_精灵.png');背景-位置:-128px 0px;宽度:125px;高度:125px;

注意上面片段中的背景位置属性。(-128px,0)表示我们正在将精灵工作表向左偏移128像素(考虑元素之间的填充)和Y轴上的0像素。如果我们要访问twitter悬停图标,那么我们的background position属性将是:

background-位置:-128px-128px;

这样,我们现在可以使用CSS访问sprite工作表的每个组件。让我们来看看一个完整的HTML和CSS代码如何做到这一点。

步骤1:编写所需的HTML代码

在下面的代码中,我们只是添加三个链接。也,我们将把HTML与样式表链接起来(屏幕.css)

instagram

twitter

facebook

第2步:编写必要的CSS。首先,我们将设计我们的共享图标类。在这里,您可以看到我们引用的是我们创建的sprite工作表。

/*共享图标类*/

跨度图标a: 链接

跨度图标a: 已访问{

显示:块;

文本缩进:-9999px;

背景图像:url(/img)_精灵.png);

后台重复:不重复;

}

第3步:使用偏移量从精灵表中获取各个图标。

/*Instagram Icon*/

跨度instagrama: 链接

跨度instagrama: 访问{

宽度:125px;

高度:125px;

背景位置:0 0;

}

/*Twitter图标*/

span.twitter网站a: 链接

span.twitter网站a: 访问{

宽度:125px;

高度:125px;

背景位置:-128px 0;

}

/*Facebook图标*/

span.facebook网站a: 链接

span.facebook网站a: 访问{

宽度:125px;

高度:125px;

背景位置:-257px 0;

}

步骤4:使用偏移量从精灵工作表中获取悬停图标。

跨度instagrama: 悬停{背景位置:0-128px;}

span.twitter网站a: 悬停{背景位置:-128px-128px;}

span.facebook网站a: 悬停{背景位置:-255px-128px;}

使用CSS精灵的公司

业内许多大牌都使用CSS精灵来提高网站的响应能力。像Google、Facebook、Amazon这样的公司广泛使用这种方法,因为这有助于减少特定用户每次会话的HTTP请求数。当我们考虑到这些公司在任何特定时刻为数百万客户提供服务时,这是一个巨大的好处。

既然你已经掌握了CSS精灵是什么以及如何与它们合作,你就离学习CSS的旅程又近了一步。像sprites这样的概念在当今时代是一个游戏的改变者,因为对于开发者来说,从网页中提取每一点性能已经变得非常重要。

查看我们的全堆栈Web开发者大师程序,该程序带有指导老师指导的现场培训和真实的项目体验。此培训使您精通使用后端和前端web技术的技能。它包括Web开发、jQuery、Angular、NodeJS、ExpressJS和MongoDB方面的培训。

有问题要问我们吗?请在“HTML图片”博客的评论部分提到它,我们会给你回复的

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能电影免费 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录