这是一种“有效”的 css 图像替换技术吗？答案

【问题标题】：Is this a "valid" css image replacement technique?这是一种“有效”的 css 图像替换技术吗？
【发布时间】：2010-04-14 13:19:13
【问题描述】：

我刚想出这个，它似乎适用于所有现代浏览器，我只是在（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 开启/图像关闭问题

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

我想知道，谁使用没有样式表的图像？什么手机什么的？

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

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

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

A.我可以使用 css-sprites

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

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

【问题讨论】：

我真的很感激回答“谁使用没有样式表的图像？”我想不出你为什么会这样，我能想到的所有例子都是“没有 css/没有图像”或“css 但没有图像”，但我可能会遗漏一些明显的东西。

标签： css seo accessibility image-replacement

【解决方案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>

【讨论】：

哦，是的，它与我编写的一个简短的 php 脚本一起使用，用于跨多个域传播 css 背景图像。
你读过我在问题中写的关于文本缩进的内容吗？我试图避免有人打开 CSS 但关闭图像时引起的问题。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：