宁波企业网站建设：使用单个图像和CSS“Sprites”显示图标_极简慕枫

最近，我一直在一个网站上工作，在一个页面上显示了许多图标。减少服务器请求的方法之一是将所有图标存储在单个图像中，并使用CSS仅显示页面上特定位置所需的图像部分。设计人员通常使用此技术来显示单个图像中的图标。它通常被称为CSS精灵。

宁波企业网站建设首先，让我们看一下我们将要使用的图标的图像。我为这个例子选择了这些垃圾图标。你可以在几乎任何一个股票摄影网站上找到图标，或者如果你喜欢冒险自己做。

设置

首先，我们需要弄清楚这个图像上的图标网格。图像尺寸为204像素宽，136像素高。简单的数学告诉我们每个图标的高度是68（136÷2）。每幅图像的宽度也是68（204÷3）。太好了！

使用CSS，我们将在其自己的DIV标签中显示每个图标。为此，我们将使用background-position属性的left和top值。background-position属性定义背景图像的初始位置。您可以在w3c.org找到background-image属性的详细信息。在编写CSS之前，我更喜欢绘制每个图标的顶部和左侧坐标。它使它更容易。这是带有坐标的图像。

那些不是坐标！好吧，不。它们不是笛卡尔坐标或极坐标。它们是一种特殊类型的坐标，用于定义给定图像的最左边和最上边距。负边距会使图像向上和向左移动。因此，在background-position的CSS属性中使用坐标（-136，-68）：-136px -68px会使边距从此图像中购物车图标的左上角开始。因此，考虑到这一点，我们现在可以为图标构建容器。

当我正在开发时，我喜欢将我的CSS分解为逻辑函数。在这种情况下，我想为包含图标的容器创建一个类。这样的事应该做得很好。 现在存在一个基类，它可以拉出包含精灵的正确图像，并定义容器的高度和宽度。接下来，我们需要创建一个 将显示图像中给定图标的类。我喜欢用图标类型来解决这个问题。以下是我为此图片设置的课程。 要显示这些内容的最后一步是创建容器。我们需要创建六个单独的容器并添加适当的类。以下是我们将用于显示图标的div。
.icon {
height:68px;
width:68px;
background-image:url('images/web_icons.png'); /*your location of the image may differ*/
}




.person {background-position:0px 0px;}
.info {background-position:-68px 0px;}
.upload {background-position:-136px 0px;}
.document {background-position:0px -68px;}
.check {background-position:-68px -68px;}
.cart {background-position:-136px -68px;}


<div class="icon person">
</div>
<div class="icon info">
</div>
<div class="icon upload">
</div>
<div class="icon document">
</div>
<div class="icon check">
</div>
<div class="icon cart">
</div>

在上面的例子中，我使用了类.icon和表示该图标的类，并将它们放在class属性中。使用多个类是应用样式的好方法，而无需在CSS中重复代码。
以下屏幕截图显示了此点的代码应如何在Web浏览器中呈现：

结论

使用单个图像和一些CSS样式，您可以轻松地在页面上显示图像的各个部分。选项是无限的。使用浮动和绝对定位，您可以将容器放在页面的任何位置。您可以轻松地将：hover伪类应用于适当的元素，并在光标位于该元素上时使图像移位。我们将在另一个教程中解决这个问题 请记住，有些浏览器不支持：hover伪类，即IE（大惊喜！）。

有些网站广泛使用CSS sprites。前几天我偶然发现了一个。Kaleidoscope主要在其主页上为许多图形使用一个大图像。你可以在这里看到完整的图像。虽然保持服务器请求可能看起来很小，但是从长远来看，这种远见和良好的编码可以帮助网站实现可扩展性。

快乐的设计！

宁波企业网站建设