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雪碧問題，有沒有更好的方法？

回答

相關問題