如何使用CSS sprites组合图像

Question

使用GTmetrix测试我的wordpress网站速度后，我在YSlow上得到了以下建议：

*使用CSS sprites组合图像 从wamakity.com提供的以下图像应使用CSS精灵组合成尽可能少的图像。

*添加Expires标头 有9个静态组件没有远期到期日期。

*减少HTTP请求 此页面有16个外部Javascript脚本。尝试将它们合并为一个。

此页面有14个外部样式表。尝试将它们合并为一个。

此页面有15个外部背景图像。尝试将它们与CSS精灵结合使用。

有人可以帮忙吗？我是wordpress的新手，除了这里，我似乎找不到任何其他方法来解决这个问题。 谢谢！

Answer 1

我最喜欢的精灵生成器是https://spritegen.website-performance.org/ 您只需将小图像拖放到窗口，下载spritesheet.png，stylesheet.css，然后在style.css中更改此图像的背景图像和背景位置属性