css 图像精灵 下载_如何使用CSS图像精灵保存网络请求

css 图像精灵 下载

While average broadband speeds continue to rise in the UK, reducing the transfer of unnecessary data and network requests on your website is extremely important to make sure your website is as optimised as possible and provides your visitors with the best user experience. The savings you can make on bandwidth transfer and server resources from optimising your website are significant and are especially noticeable as your website becomes more popular.

尽管英国的平均宽带速度继续提高 ，但减少网站上不必要的数据和网络请求的传输对于确保您的网站尽可能优化并为访问者提供最佳用户体验至关重要。 通过优化网站，您可以在带宽传输和服务器资源方面节省大量资金，并且随着您的网站越来越受欢迎，这一点尤其明显。

In this article, we’ll focus on one topic that is so easy to do and yet can save on a ton of unnecessary separate network requests: image sprites. While not entirely self-explanatory, sprites allow you to add multiple graphics into one image and then only display the portion of the image on a particular HTML element using CSS. You can manipulate what portion of the image is displayed in CSS using the background-position property.

在本文中，我们将集中讨论一个主题，它非常容易实现，而且可以节省大量不必要的单独网络请求：图像精灵。 尽管不是完全不言自明，但Sprite允许您将多个图形添加到一个图像中，然后仅使用CSS在特定HTML元素上显示图像的一部分。 您可以使用background-position属性来控制图像的哪一部分在CSS中显示。

Why should I care about reducing the amount of network requests browsers make?

我为什么要关心减少浏览器发出的网络请求数量？

This is a very good question. First, the time it takes to make a network request is called the “round-trip time” (RTT). Browsers have to make several different network requests simply by visiting a website for the first time, and this does not take into account all the images used on your website which have to be separately requested by the browser.

这个问题问得好。 首先，发出网络请求所花费的时间称为“往返时间”(RTT)。 浏览器只需要第一次访问一个网站就可以发出几个不同的网络请求，而这并未考虑到您网站上使用的所有图像，这些图像必须由浏览器分别请求。

Granted, the round-trip time for just one network request is within the milliseconds range, but when you add a huge bunch of network requests that a browser needs to make (CSS and JavaScript files, images, font files, etc.), it can all add up. For this reason, it is good web development practice to try and reduce the amount of network requests that need to be made.

当然，仅一个网络请求的往返时间在毫秒范围内，但是当您添加浏览器需要做出的大量网络请求(CSS和JavaScript文件，图像，字体文件等)时，它可以加起来。 因此，尝试并减少需要进行的网络请求数量是一个很好的Web开发实践。

Using CSS sprites

使用CSS精灵

Sprites work when you have an HTML element that is an identical size to the graphic that is part of an image sprite. You would have a separate CSS selector that contains the image sprite itself as a background image, and then separate selectors which make the different sections of the image visible using the background-position property. Here’s an example:

当您HTML元素的大小与作为图像精灵的一部分的图形大小相同时，精灵便起作用。 您将有一个单独CSS选择器，其中包含图像精灵本身作为背景图像，然后是单独的选择器，这些选择器使用background-position属性使图像的不同部分可见。 这是一个例子：

The image above is one of the sprites we use on our mobile website (the social media icons are actually supposed to be white, but I’ve changed the colours of those above so they are visible). The HTML elements that make use of this same image have identical dimensions set in CSS, so we can use this sprite to save on what would otherwise be 8 separate network requests.

上面的图片是我们在移动网站上使用的图片之一(社交媒体图标实际上应该是白色的，但是我更改了上面那些的颜色，因此它们可以看到)。 使用同一图像HTML元素在CSS中设置的尺寸相同，因此我们可以使用此Sprite节省8个单独的网络请求。

In my example below, I am displaying each social media icon in the sprite in each separate element:

在下面的示例中，我将在每个单独元素中的精灵中显示每个社交媒体图标：

Here is the CSS code to do this:

这是执行此操作CSS代码：

p.social > a { display: block; float: left; margin-right: 20px; width: 32px; height: 32px; background: url(‘images/header/header-footer.png’) no-repeat; font-size: 0px; /* This prevents the text inside the anchor tag from being visible */ }

p.social> a {display：block; 向左飘浮; 右边距：20px； 宽度：32px； 高度：32px； 背景：url('images / header / header-footer.png')不重复； font-size：0px; / *这样可以防止显示定位标记中的文本* /}

p.social > a:last-child { margin-right: 20px; }

p.social> a：last-child {margin-right：20px; }

/* Individual Icons */

/ *单个图标* /

p.twitter > a { background-position: -80px -32px; }

p.twitter> a {背景位置：-80px -32px; }

p.facebook > a { background-position: -112px -32px; }

p.facebook> a {background-position：-112px -32px; }

p.linkedin > a { background-position: -144px -32px; }

p.linkedin> a {background-position：-144px -32px; }

p.googleplus > a { background-position: -176px -32px; }

p.googleplus> a {背景位置：-176px -32px; }

/* End Individual Icons */

/ *结束个人图标* /

To view the full code (including the HTML), download it here.

要查看完整的代码(包括HTML)，请在此处下载 。

Brief explanation on background-position

关于背景位置的简要说明

The background-position needs to be set a negative value in order for other parts of the image to be revealed. For example if you set p.twitter > a to have a background-position of 80px 32px you are effectively telling the browser to move the image to the right by 80 pixels and down by 32 pixels, so it will be out of view because of the 32px x 32px size of the HTML element. As you might expect, if you didn’t set a background-position then the default 0px 0px would simply show the first 32 pixels of the blue “Menu” icon in the sprite image used above.

为了将图像的其他部分显示出来，需要将背景位置设置为负值。 例如，如果将p.twitter> a设置为80px 32px的背景位置，则实际上是在告诉浏览器将图像向右移动80像素，向下移动32像素，因此由于HTML元素的32px x 32px大小。 如您所料，如果您未设置背景位置，则默认的0px 0px只会在上面使用的精灵图像中显示蓝色“菜单”图标的前32个像素。

翻译自: https://www.eukhost.com/blog/webhosting/use-css-image-sprites-save-network-requests/

css 图像精灵 下载