如何在Magento中实现CSS精灵？

Question

你好，我一直在寻找一些关于Magento CSS sprites的教程。发现了几个像GTspeed，Webo的插件，但迄今为止还没有实现。

你能帮忙吗？

Answer 1

敲CSS精灵

想象一下，你必须使用你的主网页设计的六幅图像，浏览器具有单独下载。如果将它们合并为一个图像，则可以显着降低页面速度。这样可以减少显示页面所需的往返次数，从而使您的网站更快。

而不是下载六个图像，您的网页现在只需要下载一个。 这是CSS精灵的美丽。一种资源，但有几种用途。 大多数网页在他们的设计中使用几个小图像。背景图像，角落图像，图标，菜单项等。从页面速度的角度来看，这些小图像真的会加起来。

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

创建CSS精灵时有两个主要步骤。首先你必须制作图像，然后你必须定位图像。 合并图像

我们将在这里使用一个简单的例子。假设我们有两个图像，我们希望在网页上显示风格，并希望将它们合并为一个。我们必须知道图像的大小才能创建精灵。我们将使用两个图像尺寸相同（50像素乘50像素）的示例。

要组合这些图像，我们将创建一个100像素乘50像素的图像。我们必须调用这个图像，我们称之为“sprite.png”。现在我们有了一个组合图像，我们可以使用我们所了解的图像在我们的网页上正确显示它。

组合图像的宽度为50像素，高度为100像素。因此，我们可以说第一个图像（扩音器）位于新图像的前50个像素中，而第二个图像（笑脸）位于图像的下50个像素中。我们可以使用这些知识将我们的图像正确放置在我们的页面上。实质上，当我们想要笑脸时，我们需要扩音器和图像的下半部分来显示图像的上半部分。这是我们如何去这样做......

定位页面

上的图像在这个例子中，我们将使用图像作为背景图像中的div。这意味着我们将在我们的HTML中创建空的div标签来显示图像。如果我们想让扩音器图像在我们的页面上显示，我们可以创建一个“扩音器”的CSS div类... .megaphone {width：50px;高度：50像素;背景：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; height：50px; background：url（images/sprite.png）0 -50px;}

请注意，我们仍然声明相同宽度a nd高度，我们仍然调用相同的图像，但我们改变的是“0-50像素”部分。这是因为我们现在正在将图像告诉其他地方。具体而言，我们指出图像应该开始向下50像素（-50像素）。这是因为笑脸图像直到组合图像的下半部分才开始，从顶部向下50像素。 现在CSS已经完成了，我们可以在我们希望图像显示的任何地方调用div中的div。当我们希望有一个扩音器，我们只是进入所谓的“传声筒”

一个空div当我们想要的，我们进入了一个名为“微笑”

格即图像组合成CSS的基础知识的笑脸精灵，但有很多方法可以做到这一点，值得探索什么是最适合你的网页。上面的教程只是为了展示精灵如何工作，决不是深入讨论它们。