css - 将我的导航栏转换为 css Sprite

Question

目前，我网站的导航栏由包裹在“a”标签中的“img”标签组成。每个 img 都有一个 javascript 函数来显示翻转 img。所以总而言之，浏览器必须加载 18 个图像，即 18 个 http 请求，这显然是非常低效的。

我想使用 1 个带有 css 背景图像和 :hover 伪类的 sprited 图像。

问题是，如果我只对背景图像使用“a”，则无法设置高度和宽度。如果我将它设置为“a”以显示:阻止它会破坏页面的流动。有什么方法可以在使用 css{background-image} 的同时保持一切内联？

如果不是我该怎么办？

这是网站:www.thetempers.net

Answer 1

一般来说，如果你想按预期设置宽度/高度，你需要将显示设置为阻塞。

不过，通常情况下，这会在垂直方向上一个接一个地放置，这可能不是您想要的。

因此也尝试对它们应用 float:left，然后调整边距以获得正确的间距。

附带说明一下，除非您有极端负载，否则您可能获得的 sprite 性能优势可能不会很明显。很多时候，不值得头疼。