1

我刚想出这个,它似乎适用于所有现代浏览器,我只是在(IE8/兼容性、Chrome、Safari、Moz)上对其进行了测试

HTML

<img id="my_image" alt="my text" src="images/small_transparent.gif" />

CSS

#my_image{
  background-image:url('images/my_image.png');
  width:100px;
  height:100px;}

专业人士:

  • 图像替代文本是可访问性/seo 的最佳实践
  • 没有额外的 HTML 标记,而且 css 也非常小
  • 解决 css on/images off 问题,其中“文本缩进”技术对低带宽用户隐藏文本

我能想到的最大缺点是 css off/images on 情况,因为你只会发送一个透明的 gif。

我想知道,谁使用没有样式表的图像?某种手机什么的?

我正在为澳大利亚偏远地区(距离最近的城市数百公里)的客户制作一些网站,那里的许多用户将遭受拨号连接的困扰,而且浏览器也经常过时,因此“图像关闭”问题是一个重要的考虑因素.

这种技术还有其他我没有考虑过的副作用吗?

编辑:只是想添加我将在普通图像标签上使用的额外信息,因为

A. 我可以使用 css-sprites

B. 我可以使用 php 生成 css,使用单个数组在不同子域之间交替背景图像源

C. 我喜欢现在调整图像大小不会拉伸或扭曲它的方式,因此它的行为就像页面上的其他所有内容一样。

4

3 回答 3

3

普通图像标签有什么问题?img标签应在您的内容中包含图像时使用,并且 CSS 不应参与实际内容的任何部分。另一方面,演示图像应设置为 div 等的背景图像,然后通过 CSS 处理,这样它们就不会干扰内容和结构标记。

没有你需要做这样的事情的场景。

如果你想要一种在 CSS 关闭时优雅降级的图像替换技术,你可以使用旧的忠实文本缩进技术:

#element {
    width: 100px;
    height: 100px;
    background: image(pic.jpg);
    text-indent: -9999px;
}

<div id="element">This text will show if CSS is off, otherwise an image is displayed.</div>
于 2010-04-14T13:24:15.487 回答
0

好吧,当客户想要奇怪的字体时,我在 h1/h2 标签中使用这种技术。以下是我的做法http://flowdev.tumblr.com/post/1187111884/the-power-of-h1-and-h2-tags

据我所知,适用于所有浏览器。

于 2010-09-25T21:18:53.283 回答
0

Tatu 是对的,尽管您似乎不需要缩进。把你想要的图片作为img的src就行了。然后在图像关闭时获得文本(并注意 alt 文本可以在 img 上使用 CSS 设置样式),并在获取图像时显示图像。

“图像替换方法”的重要之处在于,当您设置标题样式时,人们希望将文本排除在 alt 属性之外,以便正确地进行搜索索引。尽管 img 本身就可以完成这项工作,而无需任何 CSS 或其他标记。

于 2010-04-14T16:47:37.107 回答