html - 所有图像替换技术是什么？

Question

我刚刚了解了图像替换、技术，或者更确切地说，我只是在学习，因为我在 Bootstrap 中看到了它的 mixin。我最近看到它出现了几次，所以我决定调查一下。我找到了这篇文章，但我承认我不明白所有的大惊小怪是什么。为什么不在要“替换”的文本上放置一个 IMG 标签？

score 5 · Accepted Answer

正如 OP 链接到的页面，CSS 图像替换的九种技术说，在实现图像替换时应该考虑几个方面。有些方法比其他方法更直接，大多数只在图形浏览器上真正起作用，有些有更抽象的问题，比如不必要的标记。

你所拥有的是脚踏实地的变种

<h1 class="technique-ten">
  <img src="graphics/thetitle.png" alt="The Title" />
</h1>

不需要任何 CSS，它是基本的，它适用于许多情况（屏幕阅读器、纯文本浏览器等），但它不适合 SEO 目的。所以你添加额外的文字

<h1 class="technique-ten">
  The Title
  <img src="graphics/thetitle.png" alt="The Title" />
</h1>

有了这个 CSS

.technique-ten {width:350px; height:75px;}
.technique-ten img {display:block; margin-top:-1.2em}

将图像放在文本的顶部，但是您有额外的标记（中的文本h1和img表示相同的内容），如果图像被禁用，您会得到双文本。
并且您不能使用具有透明区域的图像，正如这个jsfiddle所示。使文本不可见并不是一个理想的选择，因为任何使文本不可见的方法也会影响其 SEO。

您可以将 alt txt 设置为空。

<h1 class="technique-ten">
  The Title
  <img src="graphics/thetitle.png" alt="" />
</h1>

但这只会阻止“双重文本”问题，而不是其他问题。此外，img不再具有任何语义意义。

换句话说，是的，您的解决方案有优点，但不一定比该页面上已经提到的解决方案更好，因为它具有相同类型的问题。

1 回答 1