優化CSS：雪碧或重複背景圖片？

所以我的任務是優化網站的CSS。目前，他們的按鈕使用圖像精靈像下面全部完成：優化CSS：雪碧或重複背景圖片？

Image button sprite

這些精靈都放在一個大巴紐（上40個左右不同的按鈕）。

如果我是這樣做的按鈕爲HTML而不是圖片，我想這將是類似以下內容：

<style type="text/css"> 
    a.button 
    { 
    display: block; 
    width: 175px; 
    height: 35px; 
    background: url("../images/green-gradient.jpg"); 
    background-repeat: repeat-x; 
    } 

    a.button:hover 
    { 
    background: url("../images/green-gradient-hover"); 
    } 
</style> 

<a href="#" class="button">Arrange Demo</a>

難道是更理想的做這些按鈕的HTML上面詳述（帶重複1px x 35px的重複背景圖像），還是像他們目前的精靈？

如果我確實像上面這樣使用HTML，那麼在懸停時使用不同的重複背景會有什麼性能影響嗎？

來源

2013-03-21 Barney

您需要支持哪些瀏覽器？如果您不必支持任何古代瀏覽器，則可以使用CSS3漸變。 – Lowkase 2013-03-21 13:17:07

上面概述的方法會比一個大的精靈更好，因爲明顯加載小1px寬的圖形會更快。您也可以考慮通過CSS3漸變使用純CSS。看看Bootstrap如何爲aome頂級提示製作按鈕：http：//twitter.github.com/bootstrap/base-css.html#buttons – 2013-03-21 13:18:22

到埃及人建造金字塔時，我需要瀏覽器支持。 CSS3漸變最有效嗎？我不知道是否可以將它設置爲恢復爲舊版瀏覽器使用圖像 – Barney 2013-03-21 13:25:29

你上面的方法肯定會更有效，因爲你正在加載一個較小的文件並重新使用它。也就是說，如果可能的話，使用CSS3漸變效果可能會更高效。你也可以使用一些javascript來使它更像瀏覽器，比如modernizr。

請參閱Google PageSpeed Insights來分析您的網站加載時間。

請參閱Can I Use It以查看瀏覽器對CSS3漸變的支持。

來源

2013-03-21 13:24:06 Michael

優化CSS：雪碧或重複背景圖片？

回答

相關問題