什麼是所有的圖像替換技術？

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

換句話說，是的，您的解決方案具有優點，但它不一定比那個頁面上提到的更好，因爲它具有相同類型的問題。