CSS Sprite 而不是图像?

标签 css image sprite

查看一些大型网站的代码(我有时会这样做)我注意到一些大型网站(YouTube 和 Yahoo 是我看过的两个网站)似乎几乎所有内容都使用 CSS sprites,而且几乎没有使用任何标签。

这通常被认为是好的做法吗?由于 alt 属性,我原以为使用标签会更好,尽管如果 sprited 图像用于链接到某些内容,您可以使用空白图像创建链接,然后给它一个 alt 属性(youtube Logo 左上角使用了这种技术),同时具有使用 Sprite 的速度和使用标签的可访问性。

尽管对不用于链接的图像使用 sprite 怎么样?您能否简单地使用 youtube 使用的相同技术,但不使用标签,并充分利用两者?

有没有人在开发网站时大量使用 Sprite 图?我知道您可以通过使用它们获得性能奖励(更少的 HTTP 请求和所有),但是管理一个您的很多图像都在一个大图像中的网站会变得很糟糕吗?

最佳答案

您必须将作为内容的图像与作为装饰的图像分开。

装饰性图像,例如图标、渐变或阴影,可以放在 sprite 中。这是性能方面的最佳实践,因为它节省了浏览器在准备呈现之前必须执行的 HTTP 请求数。维护起来很烦人,我不得不承认。但只要您只将相似的图像组合在一起,将所有图标放在一个文件中,就还不错。 Sprite 的替代方法是使用数据 uri:s,并将图像嵌入到 CSS 文件中,但这不适用于最慢的浏览器 IE7。所以我想说,如果您需要 IE7 支持,CSS sprites 仍然是最好的选择。

内容图片,应在 HTML 中,并设置适当的替代文本,以便辅助技术(和 Google)可以按应有的方式阅读内容。

关于CSS Sprite 而不是图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8695731/

相关文章:

css - 在 less 中转义字符串并传递变量

html - 没有 float 的div不扩展高度

python - 如何转换图像的背景颜色以匹配 Pygame 窗口的颜色?

html - CSS Sprite 菜单不会在 IE8 中显示

css - 我可以使 div 类可点击吗?

html - 将侧边栏中的图像居中

java - 使用 DataBufferByte 处理二进制位图图像中的像素

javascript - 鼠标向上 javascript 事件未触发图像控件

c# - 来自字节数组失败的图像

unity3d - 如何在Unity3d中删除切片的 Sprite