Question

我是一个伟大的精灵爱好者，但是。想了想，我做了很长时间的事情，所以想知道是否有捷径。

基本上，创建精灵很容易。让精灵工作很容易，但是做很多精灵会变得很费力。

所以想知道做多个精灵的最干净的方法是什么，我可以在我们的网页上的任何位置。我见过多个精灵表，类似于jquery ui图标，但我们有自己的图标。所以想知道是否有更清洁的方法。

所有我们将在该组中拥有大约16到20个精灵。以下是html和css的示例。

#logo-link
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/analytics.png);
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active  { background-position:0 0; }

#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/addlisting.png);
    background-position:0 32px;
}
#logo-link2:hover,#logo-link2:active    { background-position:0 0; }

html

<a href="link1.html" id="logo-link"> </a>

<a href="link2.html" id="logo-link2"> </a>

关于改进我们的精灵的任何想法。或者我们应该创建一个包含所有精灵的精灵表吗？

图片示例：

alt text

在x轴上添加了基本精灵表

alt text

示例：

alt text

好的伙计们：

到目前为止，我在css中有这个：

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/spritesheet.png);
}

.addlisting{background-position:0 32;}
.addlisting:hover{background-position:0 0;}
.addanalytics{background-position:64 32;}
.addanalytics:hover{background-position:64 0;}
.addprofile{background-position:32 32;}
.addprofile:hover{background-position:32 0;}

html我有：

<a href="link2.html" class="sprite addlisting"> </a>

<a href="link2.html" class="sprite addanalytics"> </a>

<a href="link2.html" class="sprite addprofile"> </a>

我真的没有得到（参见我上面提到的spritesheet.png，为什么简介是在32,32坐标，为什么分析是在坐标64,32

也许我的合作错了大声笑

这让我很生气，argghhh

现在添加了实际的精灵表，但是如果我可以得到与我一起玩的话，我会感到不安添加图片：

！[alt text] [5]

终于明白了。

Answer 1

使用精灵表对服务器和最终用户都有好处，因为浏览器只需要下载一个图像而不是多个图像。因此，当导航到不同的页面时，浏览器不需要下载其他图像，因为已经收到了主精灵表。

此外，关于样式表，可能更容易拥有一个主链接类来设置除background-position属性之外的所有内容。这将减少CSS的大小，并使将来更容易修改。

Answer 2

你可以像这样组合选择器。

#logo-link,#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active,#logo-link2:hover,#logo-link2:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

或者你可以添加一个名为sprite的类

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
.sprite:hover,.sprite:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

和html

<a href="link1.html" id="logo-link" class="sprite"> </a>

<a href="link2.html" id="logo-link2" class="sprite"> </a>

修改：如果您打算使用精灵表，这是另一种选择。

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(spritesheet.png);
}
.analytics{background-position:0 0;}
.analytics:hover{background-position:0 0;}
.addlisting{background-position:0 0;}
.addlisting:hover{background-position:0 0;}

HTML：

<a href="link2.html" class="sprite addlisting"> </a>

还有一个小伙伴 http://jsfiddle.net/gJkCZ/

Answer 3

如果您在asp.net工作，那么最近发布了一个专门用于解决此问题的框架。它的调用ASP.NET Sprite＆amp;图像优化框架：

采取的方法如下：

您可以将图像创建为普通的单个图像
该框架将所有单独的单独图像合并，将它们组合成一个精灵表并为其生成css

Answer 4

这是我发现的最佳方式。基本上因为主菜单（http://www.kintek.com.au）中的每个图像宽度不同，我在#id上指定宽度和背景位置。

的CSS

ul.menu li a{
    background: url(/images/menu/nav.png) no-repeat;
    height:77px;
    display:block;
    text-indent:-9999px;
}
a#home{width:73px;background-position:0 -3px;}
a#home:hover, a#home.selected {background-position:0 -83px;}

a#services{width:90px;background-position:-231px -3px;}
a#services:hover, a#services.selected {background-position:-231px -83px;}

标记

<li><a id="home"?> title="Kintek Web Design, Brisbane">Home</a></li>
<li><a id="services" class="selected">Services</a>

Css Sprite的问题，还有更好的方法吗？

4 个答案: