css - 如何在 Magento 中实现 CSS 精灵？

Question

您好，我一直在寻找一些关于 Magento 的 CSS 精灵的教程。找到了几个插件，例如 GTspeed、Webo，但到目前为止还没有实现。

你能帮我吗？

Answer 1

淘汰 CSS Sprites

想象一下，您的主网页设计使用了六张图片，并且浏览器必须单独下载它们。如果将它们组合成一张图片，您可能会大大降低页面速度。这减少了显示页面所需的往返行程，使您的网站更快。

您的网页现在只需下载一张，而不是下载六张图片。这就是 CSS 精灵的美妙之处。一种资源，但有多种用途。大多数网页在其设计中使用几个小图像。背景图像、角落图像、图标、菜单项等。从页面速度的角度来看，这些微小的图像确实加起来了。

每个图像都必须下载，这意味着网络浏览器必须向服务器请求它，服务器必须发送它，然后浏览器必须显示它。如果这只发生在一两张图片上，那会很好，但是随着越来越多的图片被加载，页面速度就会变得更糟。这种情况的解决方案称为图像精灵，它将几个小图像组合成一个图像，以便网页可以显着加快显示速度。如何将图像组合成 CSS 精灵

创建 CSS sprite 时需要执行两个主要步骤。首先，您必须制作图像，其次您必须定位图像。组合图像

我们将在这里使用一个简单的例子。假设我们有两个图像我们想在网页上显示以用于样式目的，并希望将它们组合成一个。我们必须知道图像的大小才能创建精灵。我们将使用两个图像大小相同（50 像素 x 50 像素）的示例。

为了组合这些图像，我们将创建一个 100 x 50 像素的图像。我们必须给这张图片起个名字，我们称之为“sprite.png”。现在我们有了一个组合图像，我们可以使用我们对图像的了解在我们的网页上正确显示它。

组合图像的宽度为 50 像素，高度为 100 像素。因此，我们可以说第一张图像（扩音器）位于新图像的顶部 50 像素，第二张图像（笑脸）位于图像的底部 50 像素。我们可以利用这些知识在页面上正确定位我们的图像。本质上，当我们想要扩音器时，我们将显示图像的上半部分，当我们想要笑脸时，我们将显示图像的下半部分。这就是我们如何去做...

在页面上定位图像

对于此示例，我们将使用图像作为 div 中的背景图像。这意味着我们将在 HTML 中创建空的 div 标签来显示图像。如果我们希望扩音器图像显示在页面的某个位置，我们可以创建一个 CSS div 类“扩音器”... .megaphone {width:50px; 高度：50 像素；背景：url（图像/sprite.png）0 0px；}

上面的 CSS 代码说明了扩音器图像的宽度和高度（50 像素 x 50 像素），它还调用了图像“sprite.png”，这是我们的组合图像。最后是“0 0px”部分，这就是精灵的工作方式。通过告诉图像从“0 0px”开始，表示图像应该从 0 像素 X 和 0 像素 Y 开始显示。不要让这吓到你或引发糟糕的代数作业噩梦。它实际上是在说“从顶部开始图像”和“从左侧开始图像”。由于我们在 CSS 中定义了图像的宽度和高度，因此图像只会在图像下方（扩音器所在的位置）显示 50 像素并且会停止，因此根本不会显示笑脸。现在让我们做笑脸，看看它如何改变我们的代码。我们将创建一个名为“smile”的 CSS 类... .smile {width:50px; 高度：50 像素；背景：url（图像/sprite.png）0 -50px；}

请注意，我们仍然声明相同的宽度和高度，我们仍然调用相同的图像，但我们改变的是“0 -50px”部分。这是因为我们现在告诉图像从其他地方开始。具体来说，我们声明图像应该开始向下 50 像素（-50 像素）。这是因为笑脸图像直到组合图像的下半部分才开始，从顶部向下 50 像素。现在 CSS 已经完成，我们可以在 HTML 中调用 div 来显示图像。在我们想要扩音器的地方，我们只需输入一个名为“扩音器”的空 div

当我们想要笑脸时，我们输入一个名为“smile”的 div

这是将图像组合成 CSS sprite 的基础知识，但是有很多方法可以做到这一点，值得探索最适合您的页面的方法。上面的教程只是一般地展示精灵是如何工作的，绝不是对它们的深入讨论。