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的：

图片替代文字是辅助功能/ seo的最佳做法
没有额外的HTML标记，而css也非常小
绕过css on / images off问题，其中“text-indent”技术隐藏低带宽用户的文字

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

我想知道，谁使用没有样式表的图片？某种手机还是什么东西？

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

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

编辑：只是想在正常的图片代码上添加我使用的额外信息，因为

一个。我可以使用css-sprites

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

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

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

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

关于'图像替换方法'的重要之处在于，当您设置标题样式时，人们希望文本不在alt属性中，以便正确搜索索引。 img本身虽然可以在没有任何CSS或额外标记的情况下完成工作。

Answer 3

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

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

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

3 个答案: