如何使用css精灵？ [关闭]答案

【问题标题】：how to use css sprites? [closed]如何使用css精灵？ [关闭]
【发布时间】：2017-04-19 23:38:13
【问题描述】：

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

【问题讨论】：

css-tricks.com/css-sprites
不要从 CSS sprites 开始学习 HTML 和 CSS...你已经掌握了background-position 吗？
没有。 @FelipeAls。你能告诉我从哪里开始...
先学习 HTML。然后是 CSS。然后尝试解决 Sprites。在尝试处理 sprite 之前，您可能想要执行 Javascript？
@Malione 是对的，您应该先了解基础知识。

【解决方案1】：

这是完整的代码。复制并粘贴到记事本中并将其保存为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 只使用一张图片而不是多张图片。因此，不是来自服务器的许多图像请求，而是只发送一个请求。

【讨论】：

我的示例中的第二张图片是 1x1 像素，所以我猜它在背景中丢失了。
好的。所以这个例子我需要一个 1x1 像素的图像。我可以把它做成 Photoshop。
是的，最好这样做...并确保图像是透明的。
太棒了...感谢@Hisham Muneer 它的工作...

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：