CSS背景图像alt属性
这是我以前不必处理的。 我需要在站点中的所有图像上使用alt标签，包括由CSS background-image属性使用的标签。
据我所知没有这样的CSS属性，那么请这样做的最好方法是什么？
背景图片肯定可以呈现数据！ 事实上，在提供可视化图标比通常的文本模糊列表更为紧凑和用户友好的情况下，通常build议这样做。 任何使用图像精灵都可以从这种方法中受益。
酒店列表图标显示设施是很常见的。 想象一下列出了50家酒店，每家酒店有10个设施。 CSS Sprite对于这类事情来说是完美的 – 因为它更快，所以用户体验更好。 但是，如何为这些图像实现ALT标签。 示例网站 。
答案是，他们根本不使用alt文本，而是使用包含div的title属性。
HTML
<div class="hotwire-fitness" title="Fitness Centre"></div>
CSS
.hotwire-fitness { float: left; margin-right: 5px; background: url(/prostylehttp://img.dovov.comnew_amenities.png) -71px 0; width: 21px; height: 21px; }
根据W3C（参见上面的链接），title属性与alt属性的用途大致相同
标题
标题属性的值可以以各种方式由用户代理呈现。 例如，视觉浏览器经常将标题显示为“工具提示”（当指示设备暂停在对象上时出现的短消息）。 audio用户代理可以在类似的上下文中说出标题信息。 例如，在链接上设置属性允许用户代理（视觉和非视觉）告诉用户链接资源的性质：
ALT
alt属性是在一组标签（即img，area和可选的input和applet）中定义的，以便为对象提供等价的文本。
在以下常见情况下，文本等价物为您的网站及其访问者带来以下好处：
- 目前，Web浏览器可用于各种容量各异的平台， 有些不能显示图像，或者只能显示一组受限制的图像; 有些可以configuration为不加载图像。 如果您的代码在其图像中设置了alt属性，则大多数浏览器将显示您提供的描述，而不是图像
- 有些访问者看不到图像，不pipe是盲目的，色盲的，低视力的; alt属性对于那些可以依靠它的人很好地了解你网页上的内容有很大的帮助
- search引擎机器人属于上述两个类别：如果您希望您的网站被编入索引，并使用alt属性来确保它们不会错过网页的重要部分。
我想你应该阅读Christian Heilmann的这篇文章 。 他解释说，背景图像只是为了美观，不应该用来呈现数据，因此免除了每个图像都应该有替代文本的规则。
摘录（强调我的）：
CSS定义的背景图像仅仅具有审美价值 – 而不是文档本身的可视内容 。 如果你需要在页面中放置一个有意义的图像，那么使用一个IMG元素，并在alt属性中给它一个替代文本。
我同意他的看法。
在这个雅虎开发者networking （ 存档链接 ）文章中build议，如果您绝对必须使用背景图像而不是img元素和alt属性，请使用以下ARIA属性：
<div role="img" aria-label="adorable puppy playing on the grass"> ... </div>
本文中的用例描述了Flickr如何select使用背景图像，因为移动设备的性能得到了极大的提升。
但是，不作为背景应用但是作为标记元素（ <img... /> ）的每个图像必须呈现alt （替代文本）属性，包括一些描述性文本或者仅仅是空的（在装饰图像的情况下）。 无障碍问题是最重要的规则之一。
一般的观点是，你不应该使用背景图像来处理具有有意义语义的东西，所以没有一个真正的方法来存储这些图像的数据。 重要的问题是你将如何处理这些数据？ 如果图片无法加载，你想显示吗？ 你是否需要它在页面上的一些编程function？ 您可以使用无意义的css属性（可能会导致错误？）任意存储数据，或者通过添加带有图像和alt标签的隐藏图像，然后当您需要背景图像时，您可以比较图像path，然后处理数据，但是你想使用一些自定义脚本来模拟你需要的。 我没有办法让浏览器自动为背景image processing某种alt属性。
正如在前面的答案中提到的那样，对于只有img标签的div标签，没有（支持的）alt属性。
真正的问题是为什么你需要添加alt属性到网站的所有背景图片 ？ 基于这个答案，它将帮助您确定采取哪种方法。
可视/文本：如果您只是试图为网站的用户添加文本回退，请继续使用title属性。 大多数浏览器在用户将鼠标hover在图像上时会提供一个可视化工具提示（消息框），如果图像没有任何原因被加载，其行为与图像失败时显示文本的alt属性相同。 该技术仍然允许网站通过将图像设置为背景来加快加载时间。
屏幕阅读器：道路select的中间，这是不同的，因为技术上保持您的图像作为背景和使用标题属性的方法应该像上面暗示的一样， “audio用户代理可以在类似的上下文中说出标题信息。 但是这并不能保证在所有情况下都能正常工作，包括一些读者可能会一起忽略它。 所以，你最终可能会select这种方法，甚至可能会添加唱片标签来帮助确保这些被捕获，或者确实用真实的图像取代背景以保证安全。
search引擎优化/search引擎：这是最大的，如果你像我一样，你添加了你的背景图片，一切都很好。 然后几个月后，客户（或者也许是你自己）意识到你错过了一些优秀的SEO黄金，没有ALT的图像。 请记住， 标题属性在search引擎上没有任何影响 ，从我的研究和在这里的一篇文章中提到： https : //www.searchenginejournal.com/how-to-use-link-title-attribute-correctly / 。 所以，如果你的目标是search引擎优化，那么你将需要一个带有alt属性的img标签。 一种可能的方法是在网站上使用alt属性加载非常小的实际图像，这样你就可以得到所有的SEO，而不必重新调整现有的CSS。 然而，这可能会导致额外的加载时间取决于大小和谷歌确实看索引时的图像path。 总之，如果你要走这条路线，只要接受要做的事情，包括实际的图像，而不是使用背景。
实现这一点的经典方法是将文本放入div并使用图像replace技术。
<div class"ir background-image">Your alt text</div>
与背景图像beeing您分配背景图像的类和ir可能是HTML5boilerplates图像replace类，如下所示：
/* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; }
这是我解决这类问题的方法：
在CSS中创build一个新的类并放置在屏幕外。 然后把你的替代文字在调用你的背景图像的属性之前。 可以是任何标签， H1 ， H2 ， p等
CSS
<style type="text/css"> .offleft { margin-left: -9000px; position: absolute; } </style>
HTML
<h1 class="offleft">put your alt text here</h1> <div class or id that calls your bg image> </div>
我不清楚你想要什么。
如果你想要一个CSS属性来呈现alt属性值，那么也许你正在寻找CSS属性函数 ，例如：
IMG:before { content: attr(alt) }
如果你想把alt属性放在背景图片上，那很奇怪，因为alt属性是HTML属性，而背景图片是CSS属性。 如果你想使用HTML alt属性，那么我认为你需要一个相应的HTML元素来放置它。
为什么“需要在背景图片上使用alt标签”：这是出于语义原因还是出于某种视觉效果原因（如果是，那么是什么效果或什么原因）？
您可以通过将alt标签放在div中来实现这一点。
例：
<div id="yourImage" alt="nameOfImage"></div>
