Question

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

Answer 1

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

<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精灵只使用一个图像而不是多个图像。因此，不是来自服务器的许多图像请求，而是仅发送一个请求。

Answer 2

一次访问服务器以获取图像与多个图像。我发现SpritePad (online app)用于构建它们，它还会生成相关的锅炉板css（如果你的开始可能有点乱）。

Answer 3

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

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

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

如何使用css sprites？

3 个答案: