CSS背景图片alt属性 [英] CSS background image alt attribute

问题描述

这是我没有处理过的。我需要在网站的所有图像使用alt标签，包括CSS背景图像属性使用的那些。

据我所知，没有CSS属性，那么最好的方法是什么呢？

解决方案

背景图片肯定可以呈现数据！事实上，这通常被推荐在呈现可视图标比文本模糊的等效列表更紧凑和用户友好。任何使用图片精灵都可以受益于此方法。

这是相当普遍的酒店列表图标显示设施。想象一下，列出50家酒店的网页，每家酒店有10个设施。 CSS Sprite是完美的这种事情 - 更好的用户体验，因为它的更快。但是如何为这些图像实现ALT标记。 示例网站。

答案是他们根本不使用 alt 文字，而是使用 标题 属性。

HTML

 < div class =hotwire-fitnesstitle =Fitness Center>< / div> 
  

CSS

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

根据W3C（见上面的链接）与alt属性相同的目的

标题

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

alt

alt属性是在一组标签中定义的（即img，area和可选地用于输入和小程序），以允许您提供等同于该对象的文本。

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

• 现在，Web浏览器可用于具有非常不同容量的各种各样的平台;一些不能显示图像或只有有限的一组类型的图像;一些可以配置为不加载图像。如果您的代码在其图片中设置了alt属性，则大多数这些浏览器会显示您提供的说明，而不显示图片


• 部分访问者无法看到图片，盲目的alt属性对那些可以信赖它的人有一个很好的了解你的页面上有什么很大的帮助


• 搜索引擎漫游器属于上述两个类别：如果你想要

$ b $ b

This is one I have not had to tackle before. I need to use alt tags on all images in a site including those used by CSS background-image attribute.

There is no CSS property like this as far as I know, so what is the best way to do this please?

解决方案

Background images sure can present data! In fact, this is often recommended where presenting visual icons is more compact and user friendly than an equivalent list of text blurbs. Any use of image sprites can benefit from this approach.

It is quite common for hotel listings icons to display amenities. Imagine a page which listed 50 hotel and each hotel had 10 amenities. A CSS Sprite would be perfect for this sort of thing -- better user experience because its faster. But how do you implement ALT tags for these images. Example site.

The answer is that they don't use alt text at all, but instead use the title attribute on the containing 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;
}

According to the W3C (see links above), the title attribute serves much of the same purpose as the alt attribute

Title

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.

这篇关于CSS背景图片alt属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！