您好我一直在寻找关于Magento的CSS精灵的一些教程。找到了像GTspeed，Webo这样的插件，但到目前为止还没有实现。
你能帮忙吗？
答案 0 :(得分：0)
敲掉CSS Sprites
想象一下，您的主网页设计使用了六张图片，浏览器必须单独下载。如果将它们合并为一个图像，则可以显着降低页面速度。这减少了显示页面所需的往返次数，使您的网站更快。
您的网页现在只需下载一个，而不是下载六张图片。 这是CSS sprites的美妙之处。一种资源，但有几种用途。 大多数网页在设计中使用了几个小图片。背景图像，角落图像，图标，菜单项等。从页面速度的角度来看，这些微小的图像真的会增加。
必须下载每个图像，这意味着Web浏览器必须向服务器询问它，服务器必须发送它，然后浏览器必须显示它。如果只发生一个或两个图像，那就没问题，但随着越来越多的图像被加载，页面速度越差。 此方案的解决方案称为图像精灵，它将多个小图像合并为一个图像，以便网页显示速度明显更快。 如何将图像组合成CSS精灵
创建CSS sprites时需要采取两个主要步骤。首先你必须制作图像，然后你必须定位图像。 合并图像
我们将在这里使用一个简单的例子。假设我们想要在网页上显示两个用于样式目的的图像，并希望将它们合并为一个。我们必须知道图像的大小才能创建精灵。我们将使用两个图像大小相同（50像素乘50像素）的示例。
要合并这些图像，我们将创建一个100像素乘50像素的图像。我们必须把这个图像称为“sprite.png”。现在我们有一个组合图像，我们可以使用我们对图像的了解在我们的网页上正确显示它。
组合图像的宽度为50像素，高度为100像素。因此，我们可以说第一个图像（扩音器）位于新图像的前50个像素中，第二个图像（笑脸）位于图像的底部50个像素中。我们可以使用这些知识在我们的页面上正确定位我们的图像。从本质上讲，当我们需要扩音器时，我们将显示图像的上半部分，当我们想要笑脸时，我们将显示图像的下半部分。这就是我们这样做的方式......
将图片放在页面上
对于此示例，我们将使用图像作为div中的背景图像。这意味着我们将在HTML中创建空div标签以显示图像。如果我们想要将扩音器图像显示在我们页面的某个位置，我们可以创建一个CSS div类“扩音器”...... .megaphone {width：50px;高度：50像素; background：url（images / sprite.png）0 0px;}
上面的CSS代码是说扩音器图像的宽度和高度（50px×50px），它也调用图像“sprite.png”，这是我们的组合图像。最后它是说“0 0px”部分，这是精灵的工作方式。通过告诉图像从“0 0px”开始，它表示图像应该从0像素X和0像素Y显示。不要让这吓到你或者带来不好的代数作业噩梦。这真的是说“在顶部开始图像”和“在左侧开始图像”。 由于我们在CSS中定义了图像的宽度和高度，因此图像将仅显示图像下方50个像素（扩音器所在的位置）并将停止，从而根本不显示笑脸。现在让我们做笑脸，看看它如何改变我们的代码。我们将创建一个名为“smile”的CSS类...... .smile {width：50px;高度：50像素; background：url（images / sprite.png）0 -50px;}
请注意，我们仍在说明相同的宽度和高度，我们仍在调用相同的图像，但我们更改的是“0 -50px”部分。这是因为我们现在告诉图像从其他地方开始。具体来说，我们声明图像应该向下开始50像素（-50px）。这是因为笑脸图像直到合并图像的下半部分才开始，从顶部向下50像素。 现在CSS已经完成，我们可以在HTML中调用div，无论我们想要显示图像。我们想要一个扩音器，我们只需输入一个名为“扩音器”的空div
当我们想要笑脸时，我们进入一个名为“微笑”的div
这是将图像组合成CSS精灵的基础知识，但有很多方法可以做到这一点，值得探索什么是最适合您的网页。上面的教程只是为了一般地展示精灵是如何工作的，而不是对它们的深入讨论。