这是“有效”吗？ css图像替换技术？

Question

我刚刚想出这个，它似乎适用于所有现代浏览器，我刚刚在（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;}

Pro 上测试了它：

• 图像替代文本是可访问性/搜索引擎优化的最佳实践，
• 无需额外HTML 标记，并且 css 也非常小，也
• 解决了 css on/images off 问题，其中“文本缩进”技术对低带宽用户隐藏文本

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

我想知道，谁使用没有样式表的图像？某种手机之类的？

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

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

编辑：只是想添加额外的信息，我会在普通图像标签上使用它，因为

A. 我可以使用 css-sprites

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

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

Answer 1

普通图像标签有什么问题？ 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>

Answer 2

塔图是对的，尽管你似乎不需要缩进。把你想要的图片作为img的src就可以了。然后，您可以在图像关闭时获取文本（请注意，可以使用 img 上的 CSS 设置替代文本的样式），并在获取图像时显示图像。

关于“图像替换方法”的重要一点是，当您设置标题样式时，人们希望文本脱离 alt 属性，以便正确地对它们进行搜索索引。不过，img 本身就可以完成这项工作，无需任何 CSS 或其他标记。

Answer 3

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

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