将我的导航栏转换为 CSS 精灵
目前我网站的导航栏由包裹在“a”标签中的“img”标签组成。每个图像都有一个 JavaScript 函数来显示翻转图像。所以总而言之，浏览器必须加载 18 个图像，即 18 个 http 请求，这显然是非常低效的。
我想使用 1 个带有 css 背景图像和 :hover 伪类的精灵图像。
问题是，如果我只使用“a”和背景图像，我无法设置高度和宽度。如果我将其设置为“a”以显示：阻止，那么它会破坏页面的流程。有没有什么方法可以使用 css{background-image} 同时保持所有内容内联？
如果不是我该怎么办？
这是网站：www.thetempers.net
at the moment the navigation bar of my website is consisted of 'img' tags wrapped in 'a' tags. Each img has a javascript function to show a rollover img. So all in all the browser has to load 18 images which is 18 http requests which is obviously very inefficient.
I want to use 1 sprited image with css background image and the :hover pseudoclass.
The problem is that if I use just 'a' with a background image I cannot set the height and width. And if I set it the 'a' to display:block than it ruins the flow of the page. Is there any way to use css{background-image} while keeping everything inline?
if not what should I do?
here is the site: www.thetempers.net
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
一般来说，如果您想按照预期设置宽度/高度，则需要将显示设置为阻止。
不过，通常情况下，这会将一个垂直放置在另一个之后，这可能不是您想要的。
因此，请尝试对它们应用 float:left，然后调整边距以获得正确的间距。
顺便说一句，除非负载极高，否则精灵获得的性能优势可能不会很明显。很多时候，这是不值得头疼的。
Generally, if you want to set the width/height, as you expected, you'll need to set the display to block.
Though, usually, that will place one right after the other vertically, probably not what you want.
So try applying float:left to them as well, and then play with the margins to get the spacing right.
On a side-note, the performance advantage you might get for sprites might not be very noticeable unless you have extreme load. A lot of times, it's not worth the headache.
您还可以使用
display: inline-block;代替display: block; float: left;但它在旧版浏览器中不起作用，例如 IE < 8.0。您可以在此处查看浏览器支持情况。精灵可以最大限度地减少对服务器的请求数量。这样服务器使用的 CPU 周期更少，传输的数据也更小。
不过，对用户来说最大的优势是他们可以更快地访问您的网站。
它的工作方式是，默认情况下大多数浏览器一次只向同一服务器发出很少的请求。因此，浏览器请求前几个文件，并且仅当其中一个文件完成下载时才请求下一个文件。
18个文件相当多了。
You may also use
display: inline-block;insted ofdisplay: block; float: left;but it won't work in older browsers e.g. IE < 8.0. You can check here for browser support.Sprites minimize the number of requests to the server. This way server uses less CPU cycles and transmitted data is a little bit smaller.
The biggest advantage for the user though is that they get your site faster.
The way it works is that most browser by default do only few requests to the same server at one time. So browser requests for first few files, and ask for next file only when one of those finish downloading.
18 files is quite a lot.
您可以应用
display: inline-block这将使您的a表现得像img。此外，对于您的具体情况，您似乎不需要额外的悬停状态图像。您可以应用不透明度...
您可以妥协 9 个请求，或者如果您使用带有此技术的精灵，则可以减小文件大小。
You can apply
display: inline-blockwhich will make yourabehave likeimg.Additionally, for your specific case it looks like you don't need extra images for the hover state. You could apply opacity...
You can compromise with 9 requests, or reduce the filesize if you are using sprites with this technique.