3

我在某处读到 css sprites 比使用简单图像更好。那个怎么样 ？我也是 Html 的新手，所以谁能告诉我 css 是如何工作的，并给我一个 css sprites 的简单示例？

4

3 回答 3

6

这是完整的代码。复制并粘贴到记事本中并将其另存为abc.html. 将以下两张图片保存在同一文件夹中： image.gif一张大一张，一张trans.gif小一张。

<html>
<head>
    <title>Image Sprites</title>
    <style type="text/css">
        img.sprite
        {
            width:46px;
            height:44px;
            background:url(image.gif) 0px 0px;
        }        

        .sprite:hover
        {
            background: url(image.gif) 0px 44px;
        }
     </style>
</head>

<body>
    <img class="sprite" src="trans.gif" />
</body>
</html>

简单来说，CSS sprite 只使用一张图片而不是多张图片。因此，不是来自服务器的许多图像请求，而是只发送一个请求。

于 2012-09-11T15:33:59.327 回答
5

一次访问服务器以获取图像与多个图像。我找到 了 SpritePad（在线应用程序）来构建它们，它还会生成相关的样板 css（如果你刚开始可能会有点混乱）。

于 2012-09-11T15:34:32.310 回答
1

在基本术语中 - 它允许您加载一张图像并在页面周围的各种元素上使用所述图像。导致更少的加载请求和可能的加载时间。

这是一个例子： http ://www.thedotproduct.org/experiments/css-sprites/

这是使用的精灵图像： http ://www.thedotproduct.org/experiments/css-sprites/css-sprites-menu.jpg

于 2012-09-11T15:32:19.533 回答