css sprites_CSS Image Sprites简介：它们易于学习且广为人知

css sprites

by Zlatan Bekric

通过Zlatan Bekric

CSS Image Sprites简介：它们易于学习且广为人知 (An intro to CSS Image Sprites: they’re easy to learn and great to know)

Image sprites have been here since the 1970s. They were used for the first computer animations on Atari and other consoles. As time went on they were used less and less by front-end developers who wanted more advanced (read: realistic) graphics for 3D and virtual reality.

自1970年代以来，这里一直有图像精灵。 它们用于Atari和其他控制台上的第一批计算机动画。 随着时间的流逝，前端开发人员越来越少地使用它们，他们希望为3D和虚拟现实提供更高级的(阅读：逼真的)图形。

In recent years, however, they’ve made a comeback.

但是，近年来，他们已经卷土重来。

Sprite is a computer graphics term for a two-dimensional bitmap that is integrated into a larger scene.

Sprite是计算机图形学术语，是指集成到较大场景中的二维位图。

In the last few years, Facebook, Twitter, Instagram, and many other social media platforms grew like crazy. With growth came their need to optimize wherever possible and shrink the size of server requests. That’s when CSS image sprites went back into the mainstream.

在过去的几年中，Facebook，Twitter，Instagram和许多其他社交媒体平台变得疯狂起来。 随着增长，他们需要尽可能地优化并缩小服务器请求的大小。 那时CSS图像精灵又回到了主流。

For a platform like Facebook — which has more than 1 billion users — showing icons, images, and similar content requires multiple server requests. The requests unnecessarily overload the traffic.

对于拥有超过10亿用户的Facebook之类的平台，显示图标，图像和类似内容需要多个服务器请求。 请求不必要地使流量过载。

那么，如何减少服务器请求和带宽呢？ 转向CSS图片精灵。 (So what do you do to reduce server requests and bandwidth? Turn to CSS image sprites.)

Instead of making a request for your profile image, your friend’s profile image, your album thumbnails, etc, sprites allow you to use one image, which means only one request. You can manipulate that image to show those images as portions of one larger image.

Sprite无需请求您的个人资料图像，朋友的个人资料图像，相册缩略图等，而是允许您使用一个图像，这意味着仅一个请求。 您可以操纵该图像以将这些图像显示为一个较大图像的一部分。

Let’s see an example involving flags :

让我们来看一个涉及标志的示例：

Now let’s see how it works:

现在让我们看看它是如何工作的：

As you can see in the code above, we have set up the base that consists of three divs, where each div will be a sprite carrier.

如您在上面的代码中看到的，我们设置了由三个div组成的基础，其中每个div将是一个精灵载体。

Firstly we picked the div with the ID of first. Our div will have a size of height and width that will be shown on our page. As the background, we will load in an image with URL (“https://i.postimg.cc/R0N7nkH9/flags.png").

首先，我们选择ID为first的div。 我们的div的高度和宽度大小将显示在页面上。 作为背景，我们将加载具有URL(“ https://i.postimg.cc/R0N7nkH9/flags.png”)的图像。

The next thing is to scale down/up our background image with background-size:1400px . (We can use actual pixel size, percentage, em or rem.) This parameter will allow us to “zoom in” an image until the point where only a certain part of the image will show.

接下来的事情是使用background-size：1400px缩小/放大我们的背景图像。 (我们可以使用实际的像素大小，百分比，em或rem。)此参数将允许我们“放大”图像，直到仅显示图像的特定部分为止。

Lastly, the two params that come after the background:

最后，出现在背景之后的两个参数：

URL(“https://i.postimg.cc/R0N7nkH9/flags.png"), will move the portion of the main image, that is going to be visible along X and Y axis. Which means that in this case background:

URL(“ https://i.postimg.cc/R0N7nkH9/flags.png”)将移动主图像的沿X和Y轴可见的部分。这意味着在这种情况下背景：

URL(“https://i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; we will be showing the part that is offset from the top of the image by 87 pixels from the top and 86 pixels from the left.

URL(“ https://i.postimg.cc/R0N7nkH9/flags.png”)-86px -87px；我们将显示从图像顶部偏移87像素，从图像顶部偏移86像素的部分左边。

The first number (-86px) stands for X-axis where negative means moving from left to right and positive stands for going from the right to left. The second numbers (-87px) are used to offset from top to a bottom, where inverted rules apply, a positive number means going from the bottom to top, and negative of course going from top to bottom.

第一个数字( -86px )代表X轴，其中负数表示从左向右移动，正数表示从右向左移动。 第二个数字(-87px)用于从上到下偏移，其中应用了反向规则，正数表示从下到上，负数表示从上到下。

As you can see on the original image, the flag that we got (Bosnia) is indeed second from the top and second from the left.

正如您在原始图像上看到的那样，我们得到的标记(波斯尼亚)确实排在第二位，而位于第二位。

Good enough? OK let’s continue.

够好了？ 好，让我们继续。

Now let’s fill up the div with an ID of second. Same rules for setup will apply and the only change will be that in this case, we will stay on the original X-axis (0px), and Y direction will go from the bottom part towards the top (89px). Again if you check original image, you may see that (Uzbekistan) is first from the bottom, and first from the left.

现在让我们用第二个ID填充div。 适用相同的设置规则，唯一的变化是在这种情况下，我们将停留在原始X轴(0像素)上， Y方向将从底部向顶部(89像素)移动。 同样，如果您检查原始图像，则可能会看到(乌兹别克斯坦)首先是从底部开始，然后是从左侧开始。

And last, but not least…

最后但并非最不重要…

Yes, lastly we are filling up the last div with an ID of third. Rules are the same, and if you guessed that we moved from the bottom toward the top, well that’s true.

是的，最后我们用ID为3的数字填充了最后一个div。 规则是相同的，如果您猜到我们是从底部移到顶部的，那是真的。

Now the moment of truth ….

现在是关键时刻……。

In the case above, we were moving along the X and Y axis to show certain portions of the image with flags. Going right to left and down we got Bosnia (X-axis), going from a bottom and left (Y-axis) we got Thailand and Uzbekistan. As you’ve seen we are using only one image, and that means only one request for an image.

在上述情况下，我们沿X和Y轴移动以显示带有标志的图像的某些部分。 从右到左和向下，我们得到了波斯尼亚(X轴)，从下和左(Y轴)得到了泰国和乌兹别克斯坦。 如您所见，我们仅使用一张图像，这意味着只需要一张图像。

It is important to know that when you are building the sprites, that base image should have the same portions of images within it, for your own convenience. Like in this case where we are moving towards left and right, top and bottom, by the size of the portion plus white space. Uzbekistan (89px) and Thailand(178px) have a difference of 89px which is their actual size (87px) plus white space (1px + 1px).

重要的是要知道，在构建精灵时，为了自己的方便，该基本图像应在其中包含图像的相同部分。 就像在这种情况下，我们根据部分的大小加上空白朝左右，顶部和底部移动。 乌兹别克斯坦(89px)和泰国(178px)相差89px，这是它们的实际大小(87px)加上空白(1px + 1px)。

是的，您也可以制作动画。 (Yep, you can make animations too.)

In order to make this style of sweet, cool old school animations, we only need CSS animation properties. In this case, we were moving the original image along the X-axis, and we get this old style animation. Believe me with sprites, there are no limits.

为了制作这种风格甜美，酷炫的老式动画，我们只需要CSS动画属性。 在这种情况下，我们沿X轴移动原始图像，并得到了这种旧样式的动画。 用精灵相信我，没有限制。

It’s as easy as that :)

就这么简单:)

I hope that you have enjoyed reading this article.

希望您喜欢阅读本文。

Stay tuned for more …

敬请期待更多……

翻译自: https://www.freecodecamp.org/news/an-intro-to-css-image-sprites-theyre-easy-to-learn-and-great-to-know-c13beec82403/

css sprites