CSS影象替換：文字縮排，負邊距以及更多方法

發表於2016-07-04
CSS

CSS中的影象替換有著廣泛而多樣的歷史。如今，如果你還想這麼做，有很多至今仍然有效的影象置換技術。必須注意的是，其中一些實際上可能很快（如果不是已經） 會被Google批判，所以要謹慎使用。然而，你很難知道什麼時候一個CMS或者專案會迫使你需要get out影象替換kit!這裡是過去的kit，在web完全落實之前，這可能是最後一份你需要的影象替換技術列表。

t01dfb46ecc72cf3243

插圖來自SitePoint/Natalia Balska

使用負的文字縮排 — Phark 方法

這是web開發人員在某些情況下使用的最普遍的技術。這裡的想法是通過設定一個很大的負text-indent，讓文字遠離瀏覽器視窗:

這裡有一個CodePen演示，展示了使用text-indent隱藏文字時標題的樣子:

檢視筆記 影象替換 – 縮排方法，作者 SitePoint (@SitePoint)，在CodePen。

使用這種方法，文字仍然可以被螢幕閱讀器獲取到。然而，當文字右對齊的時侯，這種方法就行不通了。由於這個text-indent，瀏覽器也需要為我們的標題渲染一個非常大的盒子，這在一些很老舊的裝置中可能會產生問題。

Scott Kellum 方法

與其設定一個很大的負text-indent，你可以設定它為100%。這種方法下，瀏覽器不需要建立一個很大的盒子，效能會得到提升。你不需要任何額外的標記就可以使用這個方法。你需要的CSS如下:

設定overflow為hidden可以隱藏文字，whitespace: nowrap 可以阻止換行。這種方法下，閱讀器仍然可以讀取文字。這裡有一個這項技術的演示:

檢視筆記 影象替換 – Scott Kellum 方法，作者 SitePoint (@SitePoint)，在CodePen。

使用邊距 — Radu Darvas 方法

這項技術仍然是強制文字在瀏覽器視窗之外，但是是利用邊距去做的。這個想法是應用一個很大的負的左邊距，並且給標題一個相對大的寬度。

和上一種情況一樣，我們的logo被用作標題的一個背景圖片。這裡有一個演示，展現了這項技術是如何起作用的，首先是沒有邊距的，然後應用這個邊距:

檢視筆記 影象替換 – Margin 方法，作者 SitePoint (@SitePoint)，在CodePen。

如果一直滾動到右邊，你最終會看到第一個標題的背景。實際上，你不必擔心滾動條，因為這個大的負邊距補償了寬度(就像你在第二個標題中見到的)。記住，這種方法對於瀏覽器執行來說並不高效，因為瀏覽器不得不畫一個非常大的盒子。

使用內邊距 — Langridge 方法

這次我們使用padding-top 屬性把文字推出我們的標題之外。這個屬性的值會被設定成與logo的高相等。然而，僅僅這些是不夠的，我們還需要使用overflow: hidden來隱藏文字。

和之前的兩種方法相比，這個屬性可以表現出更好的效能。它也提供了和之前兩種方法相同水平的可訪問性。如下是這個技術的一個演示，第一個標題沒有填充背景，第二個有:

檢視筆記 影象替換 – 內邊距方法，作者 SitePoint (@SitePoint)，在 CodePen。

使用小的font-size — Lindsay 方法

另一種隱藏文字的方法是讓它變得非常小，並且將它的顏色設定成logo的背景。這種方法不會影響可訪問性，但是由於微小的字型和偽裝的顏色，你可能會遇到SEO困難。

這裡有個該方法的演示，第一個影象沒有設定font-size，而是在第二個影象中起了作用：

檢視筆記 影象替換 – font-size 方法，作者 SitePoint (@SitePoint)，在 CodePen。

如果你的logo沒有一個單一的背景色來允許完美的混合，你仍然會遇到困難。這種情況下，你可以把顏色設定成transparent。

使用 Display — Fahrner 影象置換

和其他方法不同，這個方法需要你增加額外的標記。這裡的想法是把文字包裹進一個元素，並且設定它的display屬性為none。這個案例中的標記可以是:

CSS可以是:

這裡有一個演示，將我們的元素的display設定成none:

檢視筆記 影象替換 – Display 方法，作者 SitePoint (@SitePoint)，在CodePen。

這個方法雖然很容易實現，但是缺乏可訪問性。這是因為display設定成none的元素會被螢幕閱讀器忽略。當visibility設定成hidden時，同樣的問題也會發生，所以你也不能用那個。你可以設定opacity為0。這樣將會隱藏元素，同時保持它仍然可以被螢幕閱讀器訪問。

使用 Overflow — Leon Dwyer 方法

我們已經在增加一些內邊距之後，使用過overflow屬性來隱藏文字。這次我們將僅僅使用overflow屬性來徹底隱藏元素。使用這個技術需要，你將你的文字像之前那種方法一樣包裹進一個元素中。這次我們的CSS看起來像這樣:

我們將span元素的寬和高都設定成0。這會強制元素內的文字移到它的盒子外。接著文字會被overflow: hidden屬性隱藏。這裡有一個CodePen演示說明了這項技術:

檢視筆記 影象替換 – Overflow 方法，作者 SitePoint (@SitePoint)，在 CodePen。

文字仍然可以被螢幕閱讀器訪問。因此，這裡不會有可訪問性的問題。

使用絕對定位 — Levin 方法

這個方法也需要一個額外的元素來工作。然而，這個元素不是包裹在文字週圍的，而是用於定位我們的影象。這裡是這個方法的標記:

這是CSS:

使用絕對定位來影象置換的演示可以在下面看到:

檢視筆記 影象替換 – 絕對定位方法，作者 SitePoint (@SitePoint)，在 CodePen。

注意，為了完全覆蓋我們的標題元素，寬和高都設定成了100% 。這個方法的唯一問題是你使用的圖片必須是完全不透明的。如果不是這樣的話，使用者將可以透過你的影象看到文字。

使用一個偽造的影象 — Radu Darvas Shim

這個方法除了我們平常的元素之外，還需要一個偽造的影象來正常工作。這個影象是一個 1×1 畫素、透明的 GIF。它的主要目的是如果圖片不能顯示，將顯示給使用者替代的文字。標記如下:

這是你需要應用的CSS:

下面的演示應該會讓你清楚明白這個方法是如何起效的:

檢視筆記 影象替換 – 偽造影象方法，作者 SitePoint (@SitePoint)，在 CodePen。

儘管真實的文字被隱藏了，螢幕閱讀器仍然可以讀到替換的標籤。所以，這個方法不會造成任何可訪問性的問題。唯一的問題就是這裡的標籤是非語義化的和偽造的。此外，如果CSS和影象都被關閉的話，你將會看到這個文字兩次。

使用真實的影象 — 使用內聯影象的 Phark 方法

這次，我們將使用一個真實的影象來做影象替換。這個影象有替換的文字，在影象不能顯示時會顯示出來。標記如下:

下面的CSS做了真正的替換:

下面的演示說明了這個技術是如何工作的:

檢視筆記 影象替換 – 真實影象技術，作者 SitePoint (@SitePoint)，在 CodePen。

你將會看到的影象不是來自標籤，而是來自background屬性。除了我們之前討論過的使用大的負文字縮排帶來的問題，這項技術似乎也不利於SEO。這項技術優於其他方法的一個優點是，在CSS關閉的情況下影象依然可見並且保持存在，但是問題是你為什麼不直接使用它自己的影象呢…

使用 Clip-path

屬性clip-path可以隱藏你指定的路徑之外的所有東西。我們可以用它裁剪文字並將它隱藏。這個文字仍然可以被螢幕閱讀器訪問，只是被視覺上隱藏了。標記如下:

這是你需要應用的 CSS :

你可以修改clip-path的值來看看文字是怎麼被裁剪的:

檢視筆記 影象替換 – clip-path 方法，作者 SitePoint (@SitePoint)，在 CodePen。

這個方法的唯一問題就是瀏覽器目前還沒有完全支援。SitePoint 最近關於clip-path屬性釋出了一篇文章，進行了更詳細的論述。瀏覽器一旦開始支援它，影象替換技術就會變得多餘且沒有必要了。

使用偽元素 — Nash 影象替換

這個技術使用一個偽元素把文字拋到一邊。標記如下:

下面的 CSS 使這項技術生效:

這裡有一個技術演示:

檢視筆記 Image Replacement – Psuedo Element Technique，作者 SitePoint (@SitePoint)，在CodePen。

這個偽元素將文字擠到一邊。文字溢位，會被overflow: hidden 屬性隱藏。這項技術的一個問題是它只能工作在Internet Explorer 8 及以上。

總結

### 這個作者還寫了:

上述討論的每個方法都有自己的優缺點。總的來說，他們都將不利於SEO，如果你可以完全避免使用它 — 那麼現在是時候擺脫它們了！在 SitePoint 接下來的一篇文章中，我們將會看到行業裡是如何擺脫他們的，並且瞭解目前最好的方法是什麼。如果你想到了任何其他的方法，或者你對於我們討論的技術有所補充，可以在下面評論。

來自 PatCat (30/06/2016) 的更新: 這篇文章起初說到在網站標題中使用影象可能會對SEO和可訪問性有負面影響。這不是真的。實際上，由於Google正在為影象替換做準備工作，情況可能相反。我已經修改了這篇文章, 謝謝你們的評論!

相關文章