九种 CSS 图片替换技巧

CSS 图片替换是一种用图像替换文本元素（通常是标题标签）的技术。例如，在页面上包含一个徽标。您可能希望为此使用<h1>标签和文本以获得可访问性和 SEO 优势，但理想情况下，您希望显示徽标，而不是文本。

请注意，其中一些技术非常古老。2000年代初的网页设计与现在大不相同，但人们仍然非常重视可访问性。因此，这些技术中的大多数在今天仍然适用。看看人们对这个问题的思考和解决方法仍然非常有趣。另请注意，我测试了所有这些 FF2、Opera 9、Safari 3 和 IE 6，并且它们的行为完全相同（难以置信，我知道）。

成绩单包含五个主要类别

• CSS 开启 / 图片 开启
  表示浏览器处于正常状态。所有技术都应该通过此测试，因为这是整个要点。
• CSS 开启 / 图片 关闭
  表示使用常规样式表但图片关闭进行浏览。这种情况很少见，但有可能（带宽有限的用户……）这是最困难的测试。由于这些技术中的大多数都尽最大努力隐藏文本，当图片关闭时，这意味着什么也没有显示，这不好。在此仅显示文本被视为通过。
• CSS 关闭 / 图片 开启
  表示不应用任何样式表进行浏览。大多数技术在此默认使用常规网页文本，这并不完全是失败，但由于图片可能仍然开启，因此我也不认为它通过。
• CSS 关闭 / 图片 关闭
  表示图片关闭且不应用任何样式表进行浏览。在此默认使用文本被视为通过。
• 额外的无用标记
  为了图片替换而添加标记并非理想之选。无法真正实现内容和设计的分离。

技巧 #1

<h1 id="technique-one">
  <span>CSS-Tricks</span>
</h1>

h1#technique-one {
  width: 250px;
  height: 25px;
  background-image: url(logo.gif);
}
h1#technique-one span {
  display: none;
}

更多信息：此技术称为 FIR 或“Fahrner 图片替换”。关于此有很多文章，包括一篇关于其可访问性问题的 A List Apart 文章，以及 David Shea 的一篇文章 为其辩护。这里的前提是使用 span 来包装标题内的文本，并使用该 span 来隐藏文本。它有效，但使用 display: none 将隐藏屏幕阅读器（以及大概的搜索引擎，不好）中的文本。

技巧 #2

<h1 class="technique-two">
  CSS-Tricks
</h1>

h1.technique-two {
  width: 2350px; height: 75px;
  background: url("images/header-image.jpg") top right;
  margin: 0 0 0 -2000px;
}

更多信息：Radu Darvas 拥有此技术的功劳。基本上，此技术创建一个巨大的盒子，该盒子向左延伸到屏幕外。文本由于左对齐，因此无法看到。图像放置在此框的左上角。它有效，但它存在 CSS 开启 / 图片关闭时失败的常见问题。我还可以看到，除了总体上效率低于其他一些技术之外，此巨大的盒子在更复杂的布局中也可能存在问题。

技巧 #3

<h1 class="technique-three">
  CSS-Tricks
</h1>

h1.technique-three {
  width: 350px; 
  height: 75px;
  background: url("images/header-image.jpg");
  text-indent: -9999px;
}

更多信息：此技术归功于 Mike Rundle，并称为 Phark 方法。这可能是今天使用最广泛的技术。在撰写本文时，它肯定是我最常用的技术。甚至还有一件 T恤 基于此（从底部向上数第二个）。其前提非常简单：用背景图片替换块，用缩进将文本踢出页面。它有效并且让屏幕阅读器保持快乐。它仅在难以捉摸的 CSS 开启 / 图片关闭问题中失败。此技术的变体是使用 负字母间距代替，据称可以解决在某些浏览器中触发巨大不需要的滚动条的问题。

技巧 #4

<h1 class="technique-four">
  <a href="#">
    <img src="images/header-image.jpg" alt="CSS-Tricks" />
  </a>
</h1>

h1.technique-four {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}

更多信息：我不确定此技术的起源，但它基本上是 Phark 技术的扩展。您不是将文本从屏幕上弹出，而是将图像从屏幕上弹出。这具有明显的优势，即在 CSS 关闭且图片开启时仍显示图像，并且还具有 508 合规性 的 ALT 文本。此技术在 CSS 开启 / 图片关闭时仍然失败。我感谢 Volkan Görgülü 指出这是 Smashing Magazine 在其标题中使用的技术。对这种技术的一个担忧是它是否有效 SEO，具体来说，ALT 文本是否与常规网页文本一样好。此技术的扩展是在锚链接内也包含常规网页文本。文本和图像都将使用文本缩进从页面上弹出，并且它将缓解 SEO 问题，但随后您将在图片关闭和 CSS 关闭时获得“双文本”。

技巧 #5

<h1 class="technique-five">
  <img src="images/blank.gif" alt="CSS-Tricks" />
  <span>CSS-Tricks</span>
</h1>

h1.technique-five {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	}
	h1.technique-five span {
		display: none;
	}

更多信息：Radu Darvas 也拥有此技术的功劳。通过将单像素透明 GIF 图像包含到标记中，您可以恢复图片关闭时的 ALT 文本。这允许在 CSS 开启 / 图片关闭时显示文本（！）。非常有效，但添加 shim GIF 对语义来说打击很大。此外，在 CSS 和图片都关闭时，您会得到“双文本”，这意味着 ALT 文本和常规标题文本。

技巧 #6

<h1 class="technique-six">
  CSS-Tricks
</h1>

h1.technique-six {
	width: 350px;
	padding: 75px 0 0 0;
	height: 0;
	background: url("images/header-image.jpg") no-repeat;
	overflow: hidden;
}

更多信息：此技术归功于 Seamus Leahy 和 Stuart Langridge 同时发现。此技术创建一个框，该框将呈现具有仅由顶部填充生成的的高度。通过将 overflow 设置为 hidden，文本将自动隐藏，但框将正确调整为背景图像的大小。这对于可访问性友好且相当有效，但在 CSS 关闭 / 图片开启测试中失败，并且需要针对旧版 IE 进行盒模型 hack。

技巧 #7

<h1 class="technique-seven">
	<span>CSS-Tricks</span>
</h1>

h1.technique-seven {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg") no-repeat;
	}
	h1.technique-seven span {
		display: block;
		width: 0;
		height: 0;
		overflow: hidden;
	}

更多信息：归功于 Leon Dwyer。此技术能够通过将文本放入宽度为 0px、高度为 0px 且溢出隐藏的框中来隐藏文本。因为它不使用 display 属性来隐藏文本，所以它对屏幕阅读器是安全的。

技巧 #8

<h1 class="technique-eight">
  <span></span>CSS-Tricks
</h1>

h1.technique-eight {
	width: 350px; height: 75px;
	position: relative;
	}
	h1.technique-eight span {
		background: url("images/header-image.jpg");
		position: absolute;
		width: 100%;
		height: 100%;
	}

更多信息： 此技巧归功于Levin Alexander。在此技巧中，背景图像并非将文本推离页面或以其他方式隐藏文本，而是**覆盖**在文本之上。除了第 5 种技巧之外，这是唯一一种通过 CSS 开启 / 图片关闭测试的技巧。此技巧的一个问题是，如果您的背景图像使用了透明度，则文本会透出来。此外，虽然在该技巧的原始撰写中未包含，但我建议隐藏溢出内容，以便如果文本大小被放大到超出框的大小，它就不会显示。

技巧 #9

<h1 class="technique-nine">
  CSS-Tricks
</h1>

h1.technique-nine {
  width: 350px; height: 75px;
  background: url("images/header-image.jpg") no-repeat;
  font-size: 1px;
  color: white;
}

更多信息： 此技巧归功于Russ Weakley。使用此技巧，只需将文本设置为超小的 1px 大小并将其颜色与图像的背景颜色匹配，您甚至不需要隐藏它。虽然此技巧在可访问性方面很有意义，但它也存在自身的问题。与大多数其他技巧一样，它不适用于 CSS 开启 / 图片关闭。即使在 1px 大小下，文本仍然可见，因此此技巧仅适用于纯色背景，在这种背景下它可以完美地融合。我也有怀疑，这样做可能会对 SEO 造成一些不利影响，这既是因为字体大小非常小，也是因为背景颜色和颜色匹配。

更多信息…

• 像往常一样，还有一个javascript 解决方案。
• 有一种使用内联块而不是块来实现此目的的技术。
• 如果您使用此技术的唯一原因是更改字体，那么最好使用 @font-face。
• Google 网站管理员工具有一篇关于此的文章，其中没有特别介绍图像替换，但从字里行间可以看出，合理使用此技巧不会有任何负面影响。