这是一个；“有效”；css图像替换技术？

我刚刚想到了这个，它似乎在所有现代浏览器中都能工作，我只是在（IE8/兼容性、Chrome、Safari、Moz）上测试了它

HTML

专业人士：

• 图像alt文本是可访问性/搜索引擎优化的最佳实践
• 没有额外的HTML标记，css也非常简单
• 绕过css开/关问题，“文本缩进”技术对低带宽用户隐藏文本

我能想到的最大的缺点是css关闭/图像打开的情况，因为你只会发送一个透明的gif

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

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

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

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

答：我可以使用css精灵

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

---

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

普通图像标签有什么问题

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>

#元素{
宽度：100px；
高度：100px；
背景：图片（pic.jpg）；
文本缩进：-9999px；
}
此文本将显示CSS是否关闭，否则将显示图像。

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

---

“图像替换方法”的一个重要特点是，当您设置标题样式时，人们希望将文本从alt属性中删除，以便正确索引搜索。img本身就可以完成这项工作，而不需要任何CSS或额外的标记。

当客户端需要奇怪的字体时，我在h1/h2标记中使用这种技术。我是这样做的

---

据我所知，它可以在所有浏览器中工作。

哦，是的，它与我编写的一个简短php脚本一起，用于在多个域中传播css背景图像。你读过我在问题中写的关于文本缩进的内容吗？我试图避免当有人打开CSS，但关闭了图像时产生的问题。我真的很想回答“谁使用没有样式表的图像？”我想不出任何理由，我能想到的所有例子都是“没有CSS/没有图像”或“CSS但没有图像”，但可能有一些明显的我遗漏了。

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

#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>