不同高度和寬度的CSS精靈

下午，並希望你們都有一個美妙的聖誕節。不同高度和寬度的CSS精靈

爲了儘可能減少HTTP請求的目標，我想使用所有用於背景的模式製作精靈。我已經爲該網站製作了2個精靈，但都使用特定尺寸的高度和/或寬度

在背景重複X和Y和/或使用寬度= 100％的情況下，是否可以使用精靈？

我有這些文件：

blog.png (65px*65px) 
contacts.png (67px*100px) 
intro.png (50px*50px) 
portfolio.png (80px*80px)

併爲每個我的CSS是這樣的：

#intro{width:100%;background:url(../img/pat/intro.png) repeat} 
#portfolio{width:100%;background:url(../img/pat/portfolio.png) repeat;padding-bottom:30px} 
#contact{background:url(../img/pat/contacto.png) repeat;padding-bottom:50px}

來源

2012-12-26 Afonso Gomes

精靈和重複不真的結合在一起。有一個技巧-moz-image-rect但it seems to be Gecko-only。當然，您可以將多個Y-重複圖像並排放置在一起，或者將多個X-重複圖像放在一起，但如果你想在X和Y方向重複，它必須是一個單一的圖像。

來源

2012-12-26 16:19:21 Thomas

:(如果有可能，會很酷的壽...而不是有6個背景圖像我只有1 ...少5個HTTP請求總共37個是很多！ –

雖然他們是美味的緩存，所以它'd只能在第一頁面查看，剩下的32則更多;） – Thomas

想給一些幫助嗎？：P我的網站是在afonsogomes.com ... 100/100 Pingdom工具的性能等級，Google Pagespeed爲98％，YSlow爲96％;）我會接受您可以給予的任何建議！ –

我不認爲這是可能做到這一點是這樣的。

來源

2012-12-26 16:18:35

CSS2精靈難以應用，因爲您僅限於將精靈用於指定寬度/高度的非重複模式。對於isntance，我會用一個css sprite來渲染一個具有固定寬度/高度的圖像，然後只需調用background-position: 0 -10px;（如果圖像高度爲10px），並通過垂直堆疊圖像創建css sprite。

CSS3通過允許您進行背景裁剪或其他創新方式爲您提供更大的控制。我會做一個谷歌搜索來了解更多。

如果這取決於我，我不會花這麼多時間來節省這麼小的成本。 HTTP呼叫和帶寬比以往更便宜，成本更低。你的時間最好花在壓縮html，減少後端的瓶頸，並利用緩存o保存圖像。

來源

2012-12-26 16:18:48 ProfileTwist

哎！感謝您的提示！一定會搜索它！ –

假設你的意思是'background-clip'，而不是'background-crop'，那麼這對你有什麼幫助？ – Thomas

根據重複的方式，CSS背景圖片有4種類型，其中3種可以在CSS精靈，3種不同的精靈圖案（比30張圖片更優秀）中進行組合。

no-repeat背景在1個雪碧，
repeat-x背景的第二個精靈，
repeat-y背景的第三個精靈，
重複背景必須保持原樣

您已經不同大小的背景，例如repeat-x背景，寬度爲32,33,50和80px。我給出的建議是選擇最大的那個，並製作一個這樣大小的條紋（這裏是80px）。那麼只需要應用0，-80px,-160px等的background-position，無論每個圖像的確切寬度如何。如果將32像素圖像替換爲33像素中的一個，則不必更換以下所有圖像的background-position，並仔細翻譯Photoshop中所有圖層的1像素！
如果您的所有寬度最大爲33px（80px除外），則可以選擇以安全方式製作40px的條紋，並將80px一個放在最後，這是一個特殊情況。

無關的精靈，你也可以閱讀有關新background-*屬性（如background-size: cover）：

來源

2012-12-26 16:58:12 FelipeAls

不同高度和寬度的CSS精靈

回答

相關問題