2

所以我的任务是优化网站的 CSS。目前，他们的按钮都是使用图像精灵完成的，如下所示：

图像按钮精灵

这些精灵都被放入一个大的 .png 文件中（上面有 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 （重复 1 像素 x 35 像素的重复背景图像）或像现在这样的精灵会更优化吗？

如果我确实像上面那样按照 HTML 进行操作，那么在悬停时使用不同的重复背景是否会对性能产生影响？

4

1 回答 1

1

你上面的方法肯定会更有效，因为你正在加载一个较小的文件并重新使用它。也就是说，如果可能的话，使用 CSS3 渐变可能会更有效。您还可以使用一些 javascript 使其对浏览器更加友好，例如modernizr。

请参阅Google PageSpeed Insights以分析您的网站加载时间。

请参阅Can I Use It查看浏览器对 CSS3 渐变的支持。

于 2013-03-21T13:24:06.793 回答