所有图像替换技术都有什么用?

时间:2013-06-23 06:48:27

标签: html css accessibility image-replacement

我刚刚学习了图像替换,技术,或者我只是学习,因为我在Bootstrap中看到了一个mixin。我最近看到它出现了几次,所以我决定进行调查。我找到this article,但我承认我不明白所有的大惊小怪。为什么不在您要“替换”的文本上添加IMG标记?

1 个答案:

答案 0 :(得分:5)

正如OP链接到的页面Nine Techniques for CSS Image Replacement所说,在实现图像替换时应该考虑几个方面。有些方法比其他方法更直接,大多数只在图形浏览器上工作,有些方法有更多抽象问题,比如不必要的标记。

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

<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不再具有任何语义含义。

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