如何使用 CSS sprites 组合图像

Posted 2023-03-10

【中文标题】如何使用 CSS sprites 组合图像

【英文标题】：How to combine images using CSS sprites

【发布时间】：2018-05-03 10:59:42

【问题描述】：

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

*使用 CSS 精灵组合图像 以下来自 wamakity.com 的图像应使用 CSS sprite 组合成尽可能少的图像。

*添加过期标题 有 9 个静态组件没有遥远的到期日期。

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

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

此页面有 15 张外部背景图片。尝试将它们与 CSS 精灵结合起来。

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

【问题讨论】：

该建议几乎肯定不适用于您的情况。 CSS sprites 是一种（过时的）技术，用于将图标图像组合到一个文件中。如果你对谷歌“css sprites”感兴趣，你会发现很多资源，比如这篇文章：css-tricks.com/css-sprites

【参考方案1】：

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

【讨论】：

感谢您的快速回复！我已经尝试过了，但 CSS 输出的主标题不在我的“style.css”中，正如许多教程所说的那样。我看到类似下面的 .sprite background-image: url(spritesheet.png);背景重复：不重复；显示：块； .sprite-12-2 宽度：20px;高度：20px；背景位置：-5px -5px； .sprite-2468fa3XXXX84 宽度：51px;高度：51px；背景位置：-35px -5px； ....