我经常看到像 stackoverflow 这样的网站将其 Logo 嵌入为背景图像，并为屏幕阅读器的文本添加了 span 标签。
<a href="https://stackoverflow.com" class="-logo js-gps-track">
<span class="-img _glyph">Stack Overflow</span>
</a>
为什么这样做而不是带有 alt 文本的 img 元素？ 有某种语义原因吗？一些可访问性原因？ SEO 原因？
它不适用于在图像未加载时设置备用文本的样式。您可以设置替代文本的样式...
这不是为了性能 - 因为使用 img，您可以使用 srcset 和 Sizes 来提供替代的较小图像，而 CSS 唯一接近 srcset 和 Sizes 功能的规范尚未得到很好的支持。
我认为它有意义的唯一一次是当 spritesheet 用于站点时(例如堆栈溢出)。
如果是为了防止人们“窃取” Logo ，那似乎很愚蠢，因为简单的谷歌搜索就会告诉某人如何获取背景图像的 URL。如果这就是推理，它仍然看起来很愚蠢，因为你可以只使用 pointer-events:none;在图像本身上，并将换行链接设置为 display:inline-block; ，并且它仍然是一个可点击的链接，而没有人能够右键单击并另存为。
我只是想了解这样做是否有优势。
我用谷歌搜索了一下，但没有真正找到任何有用的信息来回答为什么要这样做。
有人将其标记为重复: When to use IMG vs. CSS background-image? 他们不是同一个问题。这是您在网络上看到的特定实践和模式，其背后的推理可能与其他帖子中的答案不同。
最佳答案
Why do this instead of an img element with alt text? Is there some semantic reason? Some accessibility reason? SEO reason?
当您想要使用 CSS 媒体查询并根据屏幕分辨率显示不同的 Logo 大小时，它非常有用。
关于可访问性，这就是允许用户在禁用图像时查看替代文本之类的原因。
关于html - 使用 IMG 元素作为标题 Logo 或背景图像更好吗？为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52900954/