如何使用css sprites？

Question

如何使用css sprites？

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

Answer 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>

Run Code Online (Sandbox Code Playgroud)

简单来说,CSS精灵只使用一个图像而不是多个图像.因此,代替来自服务器的许多图像请求,仅发送单个请求.

Answer 2

vec*_*tor 5

一次访问服务器以获取图像与多个图像.我发现 SpritePad(在线应用程序)用于构建它们,它还会生成相关的锅炉板css(如果你的开始可能有点乱).

归档时间：	13 年，5 月前
查看次数：	8274 次
最近记录：	8 年，11 月前