CSS背景图片alt属性

时间：2010-11-18 14:51:58

标签： html css

这是我以前没有必须解决的问题。我需要在站点中的所有图像上使用alt标记，包括CSS background-image属性使用的那些。

据我所知，目前还没有这样的CSS属性，请问最好的方法是什么？

11 个答案:

答案 0 :(得分：120)

背景图片肯定可以呈现数据！事实上，这通常被推荐用于呈现视觉图标比同等的文本模糊列表更紧凑和用户友好。使用image sprites可以从这种方法中受益。

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

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

<强> HTML 

<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和可选的输入和applet）中定义，以允许您提供对象的文本等效项。

     

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

     
      
  • 如今，Web浏览器可用于各种各样的容量不同的平台;有些人根本不能显示图像，或者只能显示一组有限的图像;有些可以配置为不加载图像。如果您的代码在其图像中设置了alt属性，则大多数浏览器将显示您提供的描述而不是图像
    •   
  • 你的一些访客无法看到图像，无论是盲人，色盲，低视; alt属性对那些可以依赖它来了解页面内容的人有很大的帮助
    •   
  • 搜索引擎机器人属于上述两个类别：如果您希望将您的网站编入索引，请使用alt属性确保它们不会错过您网页的重要部分。
    •   

答案 1 :(得分：34)

我认为你应该阅读Christian Heilmann的this post。他解释说，背景图像仅美观，不应用于呈现数据，因此不受每个图像应具有替代文本的规则的限制。

摘录（强调我的）：

  

CSS背景图片，根据定义仅具有审美价值    - 不是文档本身的可视内容。如果你需要放一个   有意义的页面中的图像然后使用IMG元素并给它   alt属性中的替代文本。

我同意他的意见。

答案 2 :(得分：34)

在这篇Yahoo Developer Network（archived link）文章中，建议如果您绝对必须使用背景图片而不是img元素和alt属性，请使用ARIA属性作为如下：

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

文章中的用例描述了Flickr如何选择使用背景图像，因为移动设备的性能得到了极大的提升。

答案 3 :(得分：7)

如前面的答案中所述，只有img标签的div标签没有（支持）alt属性。

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

视觉/文字：如果您只是尝试为网站用户添加文本后备，请继续使用title属性。当用户将鼠标悬停在图像上时，大多数浏览器将提供可视化工具提示（消息框），并且如果由于某种原因未加载图像，则其与图像失败时呈现文本的alt属性的行为相同。此技术仍允许网站通过将图像设置为背景来加快加载时间。

屏幕阅读器：道路中间选项，这种情况会有所不同，因为在技术上将图像保留为背景并使用标题属性方法应该如上所述，“音频用户代理可能会说话在类似的上下文中标题信息。“然而，这并不能保证在所有情况下都有效，包括一些读者可能会忽略它们。因此，您可能最终选择这种方法，甚至可能添加咏叹调标签以帮助确保这些方法被捕获，或者实际上用实际图像替换背景是安全的。

搜索引擎优化/搜索引擎：这是最重要的一个，如果你像我一样，你添加了背景图片，一切都很好。然后几个月后，顾客（或者你自己）意识到你错过了一些主要的SEO黄金，因为没有替代你的图像。请注意， 标题属性对搜索引擎没有任何影响 ，来自我的研究，并在此处的文章中提及：https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/。因此，如果您的目标是搜索引擎优化，那么您将需要一个带有alt属性的img标记。一种可能的方法是使用alt属性在网站上加载非常小的实际图像，这样您就可以获得所有搜索引擎优化，而不必重新调整现有的CSS。然而，这可能导致额外的加载时间取决于大小，谷歌确实在索引时查看图像路径。简而言之，如果你要走这条路线，只需接受必须做的事情并包括实际图像而不是背景。

答案 4 :(得分：5)

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

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

with background-image beeing你指定背景图像的类，ir可以是HTML5boilerplates图像替换类，如下所示：

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

答案 5 :(得分：4)

一般认为，您不应该将背景图像用于具有有意义语义价值的事物，因此实际上并没有一种正确的方法来存储这些图像的alt数据。重要的问题是你要用alt数据做什么？如果图像不加载，是否要显示？你需要它在页面上的一些程序功能吗？ 你可以使用没有意义的make css属性任意存储数据（可能会导致错误？）或者添加带有图像和alt标签的隐藏图像，然后当你需要背景图像时你可以比较图像路径，然后处理数据，但是你想用一些自定义脚本模拟你需要的东西。我不知道如何使浏览器自动处理背景图像的某种alt属性虽然。

答案 6 :(得分：2)

以下是我对此类问题的解决方案：

在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>

答案 7 :(得分：1)

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 */
}

答案 8 :(得分：1)

这是我的立即修复解决方案：

移除背景图片后，替代文本将从 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>

答案 9 :(得分：0)

我不清楚你想要什么。

如果你想要CSS属性来渲染alt属性值，那么你可能正在寻找CSS attribute function例如：

IMG:before { content: attr(alt) }

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

为什么“需要在背景图片上使用alt标签”：这是出于语义原因还是出于某种视觉效果原因（如果是，那么效果或原因是什么）？

答案 10 :(得分：-9)

您可以通过在alt中放置div标记来实现此目的。

示例：

<div id="yourImage" alt="nameOfImage"></div>
相关问题
最新问题