html - CSS背景图片alt属性

Question

这是我以前不必处理的问题。我需要在站点中的所有图像上使用 alt 标记，包括 CSS background-image 属性使用的图像。

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

Answer 1

背景图片确实可以呈现数据!事实上，在呈现视觉图标比等效的文本简介列表更紧凑和用户友好的情况下，通常建议这样做。任何使用 image sprites可以从这种方法中受益。

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

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

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 属性的用途大致相同

标题

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:

替换

The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.

A text equivalent brings the following benefits to your website and its visitors in the following common situations:

• nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images
• some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page
• search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.