Css雪碧问题，有没有更好的方法？

我是一个伟大的精灵爱好者，但是。想到了，我尽力而为，想知道是否有捷径。Css雪碧问题，有没有更好的方法？

基本上，创建精灵很简单。让精灵工作很容易，但是做大量的精灵会变得费力。

所以想知道做多个精灵的最简洁的方法是什么，我可以在我们的网页上的任何位置。我看过多个精灵图表，类似于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]

终于搞明白了。

来源

2010-12-03 422

相关的东西，如果你想在轻松的精灵x和y，使用工具，如http://www.getspritexy.com/ – kiranvj 2012-07-26 07:24:13

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

#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 
{ 
    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>

而一个的jsfiddle http://jsfiddle.net/gJkCZ/

来源

2010-12-03 23:43:54 William

使用精灵表对服务器和最终用户都有好处，因为浏览器只需要下载一张图片而不是多张图片。因此，当浏览到不同的页面时，由于主精灵表已经被接收，所以浏览器不需要下载额外的图像。

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

来源

2010-12-03 23:29:06

呀，这是有道理的，我明白越少的url请求越好。问题是，创建一个主精灵表。在谷歌搜索，没有得到很大的。我努力理解参考图的位置，为精灵。我是否创建了一张灰色主表和一张蓝表？然后将它们分别引用到它们的坐标上，同时使用悬停效果。如果是的话，我可以参考哪个情节位置，图像左下方，右上方等等。 – 422 2010-12-03 23:31:26

精灵表可以用任何方式设计。您可以使用任何大小的间距，包括根本没有间距。工作表的布局完全取决于您。我建议只使用一张纸。例如，您可以执行的操作是创建一张只有蓝色图像并将其转换为灰度图的工作表。然后你可以将这些表合并成一个。 – 2010-12-03 23:36:00

好吧，我明白的基本面。我的图像是32px x 32px。所以想通了，我会创建4 x 4格蓝色，没有填充之间，因为图像自然不会去边界。但是，我没有得到我将如何在CSS中引用第3列1精灵。如果这是有道理的，并且该网格上的哪个点是生成精灵的参考点。我只是去，x = 128 y = 96（px）本质上？所以背景位置：128 96; – 422 2010-12-03 23:41:41

如果您在asp.net工作则出现了最近发布了一个框架，专用于处理这个问题。它的通话ASP.NET雪碧&图像优化框架：

所花费的方法如下：

您创建的图像以正常的单个图像
该框架将您所有的单独个人al图像，将它们组合成sprite表并生成它的css

来源

2010-12-04 00:19:12 rtpHarry

这是我想出的最好的方法。基本上，因为主菜单（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>

来源

2010-12-04 01:05:37 Maurice

Css雪碧问题，有没有更好的方法？

回答

相关问题