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

Question

我刚刚了解了图像替换技术，或者说我只是在学习，因为我在Bootstrap中看到了一个mixin。我最近看到它出现了几次，所以我决定进行调查。我发现this article，但我承认我不明白什么是大惊小怪。为什么不把IMG标签放在想要“替换”的文本上？

Answer 1

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

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