标签 – CSS背景图片alt属性

这是我以前没有处理的一个。我需要在网站的所有图像使用alt标签,包括CSS背景图像属性使用。

根据我所知,没有像这样的CSS属性,所以什么是最好的方法来做这个请?

背景图片肯定可以呈现数据!事实上,这通常被推荐在显示可视图标比文本模糊的等效列表更紧凑和用户友好的地方。任何使用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属性相同的目的

标题

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:

alt

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 web site 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.
http://stackoverflow.com/questions/4216035/css-background-image-alt-attribute

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:标签 – CSS背景图片alt属性