当我说 **CSS 图片替换** 时，我的意思是 **将一个原本不是图片的页面元素转换成图片**。这是一种非常常见的技巧，并且因为其语义意义和 SEO 优势而广受欢迎。一个常见的用法是在标题标签中使用它。
旧方法
<h1 class="main-logo">
CSS-Tricks
</h1>h1.main-logo {
width: 350px; height: 75px;
background: url(images/header-image.jpg);
text-indent: -9999px;
}问题:
如果关闭 CSS，这将只是降级为文本。这没什么不好，但仅仅因为有人关闭了他们的 CSS 并不一定意味着他们也希望关闭他们的图片。
新方法
<h1 class="main-logo">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>为什么这更好
关闭 CSS 时，您仍然可以显示图像。如果同时关闭 CSS **和** 图片，您将获得图像的 ALT 文本。您甚至可以使用与 CSS 图片不同的图片，如果存在良好的上下文原因。
剩余问题
这些技术都没有完美。虽然后者解决了难题的一部分，但仍然缺少一块拼图。那就是 **CSS 开启，图片关闭**。在这种情况下，您将获得空白而不是文本或图像。不太好。另一个问题是将这些元素转换为链接。您可以将标题标签包装在锚元素中，但是将块级元素包装在内联元素中是不好的做法。如果这样做，请确保将锚链接更改为块级。另一个选择是 javascript 的 onClick 事件。
注意
我相信这在以前已经被人们想到和使用过，所以“旧”和“新”在这里有点主观。
感谢 Volkan Volkan Görgülü 提供的想法！
我认为旧方法和新方法应该调换一下。 “新”方法是我们在学习使用 CSS 覆盖来显示图像的花哨方法之前人们使用的方式。
这两种方法实际上都不错，这确实是一个个人偏好的问题。我确实同意第二种方法从可用性的角度来看更好，但是——假设您想更改您的徽标图像并且您有数百个页面？与其仅仅编辑 CSS 文件来更改图像，您必须遍历每个页面并更改它（除非您当然使用某种包含——但仍然如此）。
此外，使用 CSS 方法，您还可以只更改一个页面的类以将图像替换为特殊活动页面或节日页面等的新图像。
这基本上是一个两难选择，因为无论哪种方式，在某个时刻，在 CSS、图像或两者都关闭的情况下，其中一种方式都会更好。我认为网站的开发者只需要在构建时真正评估一下，有人浏览我的网站关闭 CSS 或关闭图像的可能性有多大。或者两者兼而有之。
也许这是一个冗长的提问，它可能在其他地方已经得到解答，但我对您对此的看法很感兴趣——
为什么任何一个头脑正常的人会故意在没有图像或 CSS 的情况下浏览？我完全理解图像替换在 SEO 和许多情况下屏幕阅读器方面的优势，但在一般浏览方面，我看不到删除 CSS 或图像的任何好处，因此，我从未有过完全防降级的动机自己的网站。
替代方法的一个很好的页面 这里。
需要考虑的另一件事是我用于制作打印友好样式表的技术。这实际上是将以打印友好的方式显示的黑白徽标图像。它设置为 display:none，并在屏幕 CSS 中由彩色图像替换。
因此，在这种情况下，我仍然必须使用“旧”方法。如果我正确地制作了图像，这将是可以的，因为当关闭 CSS 时，打印图像将显示，并且至少徽标在某种程度上是可读的，这取决于我在制作每个版本时投入了多少思考。
据我了解，“新”方法的使用违背了 H1 标签的全部目的——本质上，搜索引擎会看到它是空的，而不是作为 H1——替代文本。
这就是为什么我开始依靠网站统计数据来确定替换文本（如果需要）的“最佳”方式——主要依靠 javascript 来进行替换以防止与搜索引擎发生任何冲突——最大化 SEO 并意味着那些关闭了 JS 的人获得不太“酷”的体验，但获得了相同的内容。
上面第二行应该写成“图像标签实际上是将以打印友好的方式显示的黑白徽标图像”。
BAX——不过，并非每个人都关心 SEO。好的内容是最好的 SEO。设计应该是次要的。
也就是说，我理解你的意思。对于那些确实关心它的人来说，它可能不是最好的技术。但我相信搜索引擎足够智能，可以将图像的 alt 文本识别为 H1 文本。
这项第二种技术也有利于创建打印效果良好的页面——可以隐藏网络显示的图像，并使用带背景图像的 h1。由于背景通常默认不打印，因此您可以在 print.css 中取消隐藏图像，瞧！漂亮的打印徽标图像……
Trav
使用智能手机浏览的人呢？我使用 Trio 并使用快速加载（或他们称之为的任何东西）进行浏览，这基本上是没有图像和很少或没有样式。请记住，并非所有上网的人都在使用电脑。并非所有在手机上浏览的人都在使用 iPhone。;-)
我想 pingback 在这里不起作用，但我 恭敬地不同意 关于浪费 H1 标签来包装徽标。
我基本上同意。
对于像徽标这样的东西，这种策略绝对适合结果。徽标不应该太频繁地更改。
如果您每个页面都有自定义标题，那么我可以看到通过 css 执行此操作的意义。
基本上，当您编写 css 时，恕我直言，您应该注意自己在做什么。如果图像是网站内容的一部分。那么就让它成为那样。如果它是设计的一部分，请在 css 中进行。徽标很可能就是您内容的一部分。事实上，在大多数情况下，它可能就是或应该就是。
我个人不太担心有人关闭 css。恕我直言，任何这样做的人都知道他们将获得的效果，并且这样做是为了特定原因。他们很可能期望看到大多数所有图像消失。
@Brad：我希望与我共事的人也能做到这一点！不允许使用这些“捷径”，我与之讨论过的最后一位 SEO 专家表示，谷歌基本上会看到一个空白的 h1 标签——有人请证明我错了。
@Lindsey：我认为如果这在任何网站的数百个页面上使用，它肯定会“包含”，无论哪种方式，这都是一次性更改。
@Brent：我认为你在那里是对的，可能很少有人坐在电脑前使用关闭 CSS 的方式浏览网站，如果他们这样做，他们非常清楚自己在做什么以及后果。我认为这对在其他设备上浏览更为重要。移动设备通常会从页面中删除样式以更快地显示它们。此技术非常适合这种情况，因为您的网站品牌可以通过仍然显示徽标而保持完整。
@David：这是一个很好的总结，谢谢你的链接。我注意到他们都没有真正解决 css 开启/图像关闭的情况。难以捉摸……Javascript 可能会做到这一点，但关闭它的可能性甚至高于 CSS 或图像。
@Brad：我真的很喜欢这个主意！将徽标换成黑白高对比度图像对于获得更好的打印效果是一个好主意。
@BAX：我理解潜在的 SEO 问题。我从未声称自己是 SEO 专家，但我无法想象使用这种技术会对您的优化工作造成那么大的损害。就像 Brad 提到的，并非每个人都关心 SEO，最好的 SEO 始终是好的内容。
@Anthony：Pingbacks 正在工作……只需查看“其他地方的讨论”部分评论上方的内容。我还要恭敬地不同意这种技术“浪费”了标题标签的说法。如果您正在使用的元素从字面上讲是某个部分的标题，该怎么办？我认为在图像周围使用标题标签具有完美的语义意义。
关于 SEO：我还真的想知道 ALT 文本是否“足够好”用于 SEO。如果我能做些什么，我肯定会这样做。
我认为这有点错过了图像替换的重点。我的意思是，仅仅将徽标用作图像完全有效。搜索引擎会读取 alt 文本，该文本也会提供给出于某种原因不显示图像的用户。
图像替换的真正好处是可以为标题等内容启用更好的排版。但是，您必须权衡维护问题。如果您将图像用于标题，则重新设计不再仅仅是更改一些 CSS。您现在必须重新创建所有标题图像，或者返回到纯文本（尽管有样式）。这就是为什么像 sIFR 这样的东西是一个很好的折衷方案。
当然，如果您的网站很小，替换所有图像标题可能没什么大不了的。与大多数与网页设计相关的事情一样，这实际上是一种平衡行为，并且确定您可以在哪里让步，以便您可以获得（希望比您付出的更多）。
有趣的文章！我从未想过如果人们关闭了 CSS 并且我的大多数图像都用于 CSS 会发生什么。我喜欢将它们中的大部分保留在那里，除非是徽标之类的东西，否则我通常会将其硬编码到 HTML 中。我猜如果关闭了 CSS 和图像，alt 文本将是 h1 大小，因为它在 h1 标签中？我需要尝试一下……但我猜它确实如此，否则您就不需要将其包装在该 h1 中！
关于 SEO 方面，我听说 alt 文本对屏幕阅读器更有用，但为所有 img 标签使用 title 属性可以增强 SEO。现在，我不确定这是否属实，因为我不是 SEO 专家，但我猜在里面放上它不会有什么坏处。如果您同时使用两者，我相信当您将鼠标悬停在上面时，title 属性会覆盖 alt，因此搜索引擎也可能更关注此类内容。
很棒的技术！我很多次都使用了另一种技术，类似于
标题
但我从未完全喜欢过它，过于复杂且不够“干净”
您谈论的这种方式非常简单且语义化，老实说，我认为对于那些禁用了图像使用的人来说，这只是一小部分，他们已经习惯了在存在诸多限制的情况下使用网络。
我不太熟悉图像关闭的事情，但是如果您使用图像并使用 CSS 设置背景，即使他们打开了 CSS 但关闭了图像，他们也能看到它吗？
@Zhuoshi：是的，这适用于 CSS 开启图像关闭的情况，但在 CSS 关闭图像开启的情况下，您会同时获得文本和图像，我认为在大多数情况下这会很奇怪。
不过这非常有趣。我可以看到这在徽标设计和排版分开的案例中起作用。CSS 背景图像可以同时是设计和排版，而标记可以是仅设计和网页文本的图像。关闭 CSS 将保留设计和网页文本，然后关闭图像将仅保留网页文本。
大家好。
我一直在寻找一段时间的一些问题的答案，很高兴地说我在此处找到了一些。一些非常有趣的文章。
此致
您可以通过在 h1 内部首先插入一个空的 span 标签将 bg 图像放置在文本的顶部。这样可以避免图像关闭问题。
css 如下所示
h1 {position:relative}
h1 span {position:absolute; top:0; left:0; width:100%; height:whatever height the bg image needs; background-image:url(/img/bg.gif) no-repeat;}
不确定我是否从记忆中完全正确地获得了 css，但类似这样的内容可以解决问题。不过，您需要记住，使用透明的 bg 图像会让文本透过图像。
很棒的技术，但关于这个主题我的主要问题是：当您使文本对用户不可见并用图像替换它时，Google 对此有何看法？
这种“技术”是在 CSS 开发之前使用的一种技术。它只是普通的 HTML 代码。但是，它可能会使将图像交换为其他内容变得更加困难，因为您必须要么完全替换图像（重命名旧图像并将新图像更改为与旧图像相同的名称），要么更改代码以指向新名称图像。
我会这样做的方法是为打印创建一个单独的 CSS。但是，那些禁用 CSS 的人选择禁用它，因此他们显然不希望使用图像或样式。所以我根本不认为这是一个问题。
我仍然倾向于对任何/所有图像替换使用“JS 已启用”——特别是出于 SEO 方面的考虑（我知道，SEO 仍然有点“黑魔法”），因为我合作的大多数人都对此表示担忧（或者应该根据他们的业务表示担忧）。
我希望能为所有情况设计/开发，但我真的认为整个“为所有场合设计”几乎走得太远了——即 css 开启/图像关闭。
实际上，我认为我将其分解为
*屏幕阅读器（无 js、无 css、图像的 alt 标签、语义标记）
*CSS/图像（无 js，我们添加样式）
*加上 js（我们获得一些很酷的体验）
*RIA（js、css、flash——“完整”体验）
没有重复/隐藏内容。
我想有些人不同意 http://murisfurder.com/?p=51
在与 Chris 谈话之前，实际上我正在考虑告知其他用户
h1标签作为页面主要标题的可能用途。实际上，我同意那些说徽标是内容一部分的人。因此，徽标应使用
img标签进行编码。如果我需要更改徽标，我可以覆盖旧的徽标文件。
感谢这篇文章。
如果有人阅读了所有评论，您会看到两种解决此问题的方法。Lindsey（第一条评论）说，问题是要避免因更改徽标而浪费数百页的时间。我认为，这种方法在这里无济于事（新方法）。在这种情况下，我更喜欢旧方法。
如果网站很小，我更喜欢新方法，因为公司徽标多久更改一次？
Ralph
屏幕阅读器和移动设备也可能在 CSS 和图像方面遇到问题。还有一小部分人使用纯文本浏览器浏览。
为什么不只用新名称替换徽标呢？
当然，不再需要旧徽标了。
有点晚才加入，但我在一篇来自 CSS-Globe 的年终回顾中发现了这篇文章……
@Brent（为什么人们会在没有 CSS 和/或图像的情况下浏览）
就像有些人所说的那样，手机浏览器是一个问题。不过还有其他原因。我最近开始将一些旧电脑重新用于我的课堂。
它们非常旧，我发现让它们高效运行的最佳解决方案之一是 Damn Small Linux 和 Dillo 作为网络浏览器。Dillo 不支持 CSS（或者至少它不支持太多），因此在这种情况下，学生无论是否喜欢都会在关闭 CSS 的情况下浏览。