使用 <img> 而不是 <div> 或 <span> 来做 CSS sprite 在语义上总是更正确吗？答案

【问题标题】：Is it always more semantically correct to use <img> rather than <div> or <span> to do CSS sprite?使用 <img> 而不是 <div> 或 <span> 来做 CSS sprite 在语义上总是更正确吗？
【发布时间】：2014-03-24 22:15:39
【问题描述】：

我曾经用<div> 来做CSS sprite，但实际上最好用<img> 来做，然后用display: block 或display: inline-block 将CSS 应用到它上面，这样在语义上更正确吗？（因为它实际上是一个图像）。

【问题讨论】：

CSS sprites 适用于背景图像，因为它们只是“装饰品”，而不是内容。恕我直言，将它们用于实际的内容图像没有多大意义——当语义是你所追求的时候。使用实际的图像元素至少可以让您提供alt 文本；但是 – 如果您将精灵图像直接嵌入到 img 元素的 src 的位置，则只有与 clip 属性结合使用才有意义；唯一的其他选择是使用“空白”图像并将精灵应用为背景图像......
… 如果 CSS 不可用，两者要么失去所有意义（背景图像），要么传递太多信息（以 src 和 clip 给出的完整图像不工作）。
@CBroe 比如我只能想到stackoverflow.com/questions/22621944/…数字(3)，如果是游戏，角色的图片是用CSS sprite显示的（比如记忆游戏)
好吧，对于游戏来说，情况可能会有所不同……第一个问题是，在这样的上下文中语义到底有那么重要吗？如果没有 JS 和 CSS，它可能无论如何都无法工作，无论记忆风格的游戏是否是 f.e.盲人用户（实际上可以从拥有一个真正的img 元素而不是在语义上“毫无意义”的只有背景图像的东西中受益）想要玩是值得怀疑的，我认为......

标签： html semantic-web css-sprites semantic-markup

【解决方案1】：

没有。

如果图像是您的内容的一部分，请在 HTML 中指定它。
img、object、...。
如果图片是您设计的一部分，请在 CSS 中指定。
content、background-image、...

specify design (decorative) images in the HTML 可以（使用空的alt 属性），但不建议这样做：

纯粹的装饰性图像是视觉增强、装饰或点缀，除了美观之外，不会向可以查看图像的用户提供任何功能或信息。

[…]

虽然内联包含装饰性图像不是不可接受的，但如果它们纯粹是装饰性的，则建议使用 CSS 包含图像。

然而，我想说在 HTML 中指定精灵（包含不同的图像）很少是优雅的。 替代内容是什么？示例：包含人物肖像和网站徽标的精灵。对于大多数用户来说，指定当前显示的图像 part 的替代内容（由 CSS 控制）可能会起作用，但是对于有图像但没有 CSS 支持的用户来说，这显然会失败。那些会看到整个图像文件，这在那种情况下是没有意义的。

【讨论】：