使用Retina尺寸图像时如何应用替代文字？

Question

我将双尺寸图片添加到我的网站，然后使用CSS background-size属性将这些图像压缩回来，这似乎是处理我们新的高分辨率视网膜现实的常用方法。

是否有正确的方法可以将替代文字添加到背景图片中，或者，如何为我使用此技术的图片提供替代文字？

我考虑使用可以解决这个问题的retina.js，但后来我使用了带宽来提供常规尺寸的图像和双倍尺寸的图像。

我知道stackoverflow和其他地方有其他帖子讨论替代文字和背景图片，但我发现的帖子可以追溯到视网膜显示之前。

我看过哪些帖子说明替代文字不应该应用于背景图片，那么人们会建议什么？

Answer 1

Alt =“是有意义的图像。”

如果图片具有有意义的内容，则通常需要使用替代文字。例如，我的笔记本电脑的这张照片有内容。

此类图片应放置在<img>标记中，并带有相应的替代文字，以以文字形式传达图片的目的。

另一方面，背景图像，图标，图案等这些都没有意义，内容驱动的图像。相反，它们纯粹是美学，不会对文章的内容做出贡献。这些图标链接到某些内容，这就是<a title="">属性的用途，因此请使用它。

ALT =内容驱动的图像。

顺便说一下，你不能在背景图片上添加和替换标签，除非你在感兴趣的标签上作弊并添加title值。