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 回答