我刚刚学习了图像替换和技术,或者更确切地说,我只是在学习,因为我在 Bootstrap 中看到了一个 mixin。我最近看到它出现了几次,所以我决定调查一下。我找到了 this article ,但我承认我不明白为什么要大惊小怪。为什么不直接在要“替换”的文本上放置一个 IMG 标签?
最佳答案
作为 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
不再具有任何语义意义。
换句话说,是的,您的解决方案有其优点,但不一定比该页面上已经提到的解决方案更好,因为它们存在相同类型的问题。
关于html - 所有图像替换技术有什么用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17258357/