CSS 背景图像 alt 属性

小开

我不清楚你想要什么。

如果您想要一个 CSS 属性来呈现 alt 属性值，那么您可能正在寻找 CSS 属性函数，例如:

IMG:before { content: attr(alt) }

如果您想将 alt 属性放在背景图像上，那么... ... 这很奇怪，因为 alt 属性是一个 HTML 属性，而背景图像是一个 CSS 属性。如果您想使用 HTML alt 属性，那么我认为您需要一个相应的 HTML 元素来将其放入。

为什么你“需要在背景图片上使用 alt 标签”: 这是出于语义上的原因还是视觉效果上的原因(如果是，那么是什么效果或什么原因) ？

小开

人们普遍认为，不应该将背景图像用于具有意义语义价值的事物，因此没有真正合适的方法来存储这些图像的 alt 数据。重要的问题是如何处理 alt 数据？如果图像不加载，是否显示？你需要它来实现页面上的某些编程功能吗？据我所知，浏览器不可能自动处理背景图片的 alt 属性。

小开

我认为你应该读克里斯蒂安 · 海尔曼的这篇文章。他解释说，为了美观，背景图像是 仅此而已，不应该用于呈现数据，因此不受每个图像应该有替代文本的规则。

节选(重点是我的) :

CSS 背景图片，根据定义只有审美价值 - 文档本身的非视觉内容 然后使用一个 IMG 元素，并给它 Alt 属性中的替代文本。

我同意他的看法。

小开

下面是我对这类问题的解决方案:

在 CSS 中创建一个新类，并在屏幕之外定位。然后将 alt 文本放在调用背景图像的属性之前的 HTML 中。可以是任何标签，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>

小开

您可以通过将 alt标记放在 div中来实现这一点，如果您的图像将出现的话。

例如:

<div id="yourImage" alt="nameOfImage"></div>

小开

背景图片当然可以呈现数据！事实上，这是经常被推荐的地方呈现视觉图标更紧凑和用户友好的比一个等价的文本广告列表。影像精灵的任何使用都可以从这种方法中受益。

酒店列表图标显示设施是很常见的。想象一下，有一个页面列出了50家酒店，每家酒店有10种设施。CSS Sprite 非常适合这类事情——更好的用户体验，因为它更快。但是如何为这些图像实现 ALT 标记呢？示例网站.

答案是它们根本不使用 alt文本，而是使用包含 div 的 title属性。

超文本标示语言

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
float: left;
margin-right: 5px;
background: url(/prostyle/images/new_amenities.png) -71px 0;
width: 21px;
height: 21px;
}

根据 W3C (参见上面的链接) ，title 属性的用途与 alt 属性大致相同

书名

Title 属性的值可以由用户代理以各种方式呈现。例如，可视化浏览器经常将标题显示为“工具提示”(指向设备在对象上暂停时出现的短消息)。音频用户代理可以在类似的上下文中提供标题信息。例如，在链接上设置属性允许用户代理(可视和非可视)告诉用户链接资源的性质:

Alt

Alt 属性定义在一组标记中(即 img、 area 和可选的 input 和 applet) ，以允许您为对象提供等价的文本。

在以下常见情况下，文本对等可为您的网站及其访问者带来以下好处:

现在，Web 浏览器可以在各种各样的平台上使用，它们的功能各不相同; 有些浏览器根本不能显示图像，或者只能显示一组受限的图像; 有些浏览器可以配置为不加载图像。如果您的代码在其图像中设置了 alt 属性，那么大多数浏览器将显示您给出的描述，而不是图像

你的一些访问者无法看到图片，无论他们是盲人、色盲还是低视力; alt 属性对于那些可以依赖它来了解你的页面内容的人非常有帮助

搜索引擎机器人属于以上两类: 如果你希望你的网站被索引，因为它值得，使用 alt 属性，以确保他们不会错过重要部分的网页。

小开

实现这一点的经典方法是将文本放入 div 并使用图像替换技术。

<div class"ir background-image">Your alt text</div>

使用背景图像作为分配背景图像的类，ir 可以是 HTML5boilerplate 图像替换类，如下所示:

/* ==========================================================================
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%;
}

小开

在这篇雅虎开发者网络(存档链接)文章中，建议如果您绝对使用背景图像而不是 img 元素和 alt 属性，那么使用 ARIA 属性如下:

<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>

本文中的用例描述了 Flickr 如何选择使用背景图像，因为它在移动设备上的性能得到了很大的提高。

小开

正如在其他答案中提到的，只有 img 标记才有 div 标记的(受支持的) alt 属性。

真正的问题是站点的 为什么需要在所有背景图片中添加 alt 属性？基于这个答案，它将帮助您确定在您的方法中采用哪条路线。

Visual/Text: 如果您只是想在图像加载失败时为用户添加一个文本备份，那么只需使用 title 属性。当用户将鼠标悬停在图像上方时，大多数浏览器都会提供一个可视化工具提示(消息框) ，如果图像由于某种原因没有加载，那么当图像出现故障时，它的行为就会像 alt 属性一样显示文本。这种技术仍然允许网站通过将图片设置为背景来加快加载时间。

Screen Reader: 中间选项，这个选项会有所不同，因为从技术上来说，保留你的图片作为背景，并使用标题属性的方法应该像上面提到的那样工作，“音频用户代理可以在类似的上下文中讲述标题信息。”然而，这并不保证在所有情况下都能工作，包括一些读者可能会忽略所有这些。如果您最终选择了这种方法，您还可以尝试添加咏叹调标签，以帮助确保屏幕阅读器能够识别这些标签。

SEO/搜索引擎: 这是一个大的，如果你像我一样，你添加你的背景图片，一切都很好。然后几个月后，客户(或者你自己)意识到你错过了一些主要的搜索引擎优化黄金，因为你的图片没有 Alt’s。请记住，Title 属性在搜索引擎上没有任何权重，从我的研究和在这里的一篇文章中提到: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/。因此，如果您的目标是搜索引擎优化，那么您将需要有一个具有 alt 属性的 img 标记。一种可能的方法是在网站上加载非常小的带有 alt 属性的实际图像，这样你就可以得到所有的 SEO，而不必在适当的地方重新调整现有的 CSS。然而，这可能导致额外的加载时间取决于大小和谷歌的确看图像路径索引时。简而言之，如果你走这条路线，只是接受什么必须做，包括实际的图像，而不是使用背景。

小开

这篇来自 W3C 的文章告诉你他们认为你应该做什么 Https://www.w3.org/wai/gl/wiki/ariatechnique_usingimgrole_with_aria-label_forcss-backgroundimage

这里有一些例子 Http://mars.dequecloud.com/demo/imgrole.htm

其中

<a href="http://www.facebook.com">
<span class="fb_logo" role="img" aria-label="Connect via Facebook">
</span>
</a>

不过，如果像上面的例子一样，包含背景图像的元素只是一个空容器，我个人更喜欢将文本放在那里，并使用 CSS 隐藏它; 就在显示图像的地方:

<a href="http://www.facebook.com"><span class="fb_logo">
Connect via Facebook
</span></a>


.fb_logo {
height: 37px; width: 37px;
background-image: url('../gfx/logo-facebook.svg');
color:transparent; overflow:hidden; /* hide the text */
}

小开

下面是我的即时解决方案:

一旦背景图像被删除，alt 文本将可以从 Img 标记中看到。

.alt-image {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}


.background-image{
background:url("https://www.w3schools.com/images/picture.jpg") no-repeat;
width:100%;
height:500px;
position:relative;
}

<div role="img" aria-label="place alt text here" title="place alt text here" class="background-image">
<img src="" alt="place alt text here" class="alt-image"/>
</div>