CSS中的图像替换有着广泛而多样的历史。如今，如果你还想这么做，有很多至今仍然有效的图像置换技术。必须注意的是，其中一些实际上可能很快（如果不是已经） 会被Google批判，所以要谨慎使用。然而，你很难知道什么时候一个CMS或者项目会迫使你需要get out图像替换kit!这里是过去的kit，在web完全落实之前，这可能是最后一份你需要的图像替换技术列表。

插图来自SitePoint/Natalia Balska

使用负的文本缩进 — Phark 方法

这是web开发人员在某些情况下使用的最普遍的技术。这里的想法是通过设置一个很大的负text-indent，让文本远离浏览器窗口:

这里有一个CodePen演示，展示了使用text-indent隐藏文本时标题的样子:

查看笔记 图像替换 – 缩进方法，作者 SitePoint (@SitePoint)，在CodePen。

使用这种方法，文本仍然可以被屏幕阅读器获取到。然而，当文本右对齐的时侯，这种方法就行不通了。由于这个text-indent，浏览器也需要为我们的标题渲染一个非常大的盒子，这在一些很老旧的设备中可能会产生问题。

Scott Kellum 方法

与其设置一个很大的负text-indent，你可以设置它为100%。这种方法下，浏览器不需要创建一个很大的盒子，性能会得到提升。你不需要任何额外的标记就可以使用这个方法。你需要的CSS如下:

设置overflow为hidden可以隐藏文本，whitespace: nowrap 可以阻止换行。这种方法下，阅读器仍然可以读取文本。这里有一个这项技术的演示:

查看笔记 图像替换 – Scott Kellum 方法，作者 SitePoint (@SitePoint)，在CodePen。

使用边距 — Radu Darvas 方法

这项技术仍然是强制文本在浏览器窗口之外，但是是利用边距去做的。这个想法是应用一个很大的负的左边距，并且给标题一个相对大的宽度。

和上一种情况一样，我们的logo被用作标题的一个背景图片。这里有一个演示，展现了这项技术是如何起作用的，首先是没有边距的，然后应用这个边距:

查看笔记 图像替换 – Margin 方法，作者 SitePoint (@SitePoint)，在CodePen。

如果一直滚动到右边，你最终会看到第一个标题的背景。实际上，你不必担心滚动条，因为这个大的负边距补偿了宽度(就像你在第二个标题中见到的)。记住，这种方法对于浏览器执行来说并不高效，因为浏览器不得不画一个非常大的盒子。

使用内边距 — Langridge 方法

这次我们使用padding-top 属性把文本推出我们的标题之外。这个属性的值会被设置成与logo的高相等。然而，仅仅这些是不够的，我们还需要使用overflow: hidden来隐藏文本。

和之前的两种方法相比，这个属性可以表现出更好的性能。它也提供了和之前两种方法相同水平的可访问性。如下是这个技术的一个演示，第一个标题没有填充背景，第二个有:

查看笔记 图像替换 – 内边距方法，作者 SitePoint (@SitePoint)，在 CodePen。

使用小的font-size — Lindsay 方法

另一种隐藏文本的方法是让它变得非常小，并且将它的颜色设置成logo的背景。这种方法不会影响可访问性，但是由于微小的字体和伪装的颜色，你可能会遇到SEO困难。

这里有个该方法的演示，第一个图像没有设置font-size，而是在第二个图像中起了作用：

查看笔记 图像替换 – font-size 方法，作者 SitePoint (@SitePoint)，在 CodePen。

如果你的logo没有一个单一的背景色来允许完美的混合，你仍然会遇到困难。这种情况下，你可以把颜色设置成transparent。

使用 Display — Fahrner 图像置换

和其他方法不同，这个方法需要你增加额外的标记。这里的想法是把文本包裹进一个元素，并且设置它的display属性为none。这个案例中的标记可以是:

CSS可以是:

这里有一个演示，将我们的元素的display设置成none:

查看笔记 图像替换 – Display 方法，作者 SitePoint (@SitePoint)，在CodePen。

这个方法虽然很容易实现，但是缺乏可访问性。这是因为display设置成none的元素会被屏幕阅读器忽略。当visibility设置成hidden时，同样的问题也会发生，所以你也不能用那个。你可以设置opacity为0。这样将会隐藏元素，同时保持它仍然可以被屏幕阅读器访问。

使用 Overflow — Leon Dwyer 方法

我们已经在增加一些内边距之后，使用过overflow属性来隐藏文本。这次我们将仅仅使用overflow属性来彻底隐藏元素。使用这个技术需要，你将你的文本像之前那种方法一样包裹进一个元素中。这次我们的CSS看起来像这样:

我们将span元素的宽和高都设置成0。这会强制元素内的文本移到它的盒子外。接着文本会被overflow: hidden属性隐藏。这里有一个CodePen演示说明了这项技术:

查看笔记 图像替换 – Overflow 方法，作者 SitePoint (@SitePoint)，在 CodePen。

文本仍然可以被屏幕阅读器访问。因此，这里不会有可访问性的问题。

使用绝对定位 — Levin 方法

这个方法也需要一个额外的元素来工作。然而，这个元素不是包裹在文本周围的，而是用于定位我们的图像。这里是这个方法的标记:

这是CSS:

使用绝对定位来图像置换的演示可以在下面看到:

查看笔记 图像替换 – 绝对定位方法，作者 SitePoint (@SitePoint)，在 CodePen。

注意，为了完全覆盖我们的标题元素，宽和高都设置成了100% 。这个方法的唯一问题是你使用的图片必须是完全不透明的。如果不是这样的话，用户将可以透过你的图像看到文本。

使用一个伪造的图像 — Radu Darvas Shim

这个方法除了我们平常的元素之外，还需要一个伪造的图像来正常工作。这个图像是一个 1×1 像素、透明的 GIF。它的主要目的是如果图片不能显示，将显示给用户替代的文本。标记如下:

这是你需要应用的CSS:

下面的演示应该会让你清楚明白这个方法是如何起效的:

查看笔记 图像替换 – 伪造图像方法，作者 SitePoint (@SitePoint)，在 CodePen。

尽管真实的文本被隐藏了，屏幕阅读器仍然可以读到替换的标签。所以，这个方法不会造成任何可访问性的问题。唯一的问题就是这里的标签是非语义化的和伪造的。此外，如果CSS和图像都被关闭的话，你将会看到这个文本两次。

使用真实的图像 — 使用内联图像的 Phark 方法

这次，我们将使用一个真实的图像来做图像替换。这个图像有替换的文本，在图像不能显示时会显示出来。标记如下: