英文原文：A History of CSS Image Replacement
譯者：伊一
譯文地址：http://t.cn/R5EETjh
CSS中的圖像替換有著廣泛而多樣的歷史空猜。如今湾盗，如果你還想這么做崇渗，有很多至今仍然有效的圖像置換技術(shù)旋廷。必須注意的是泳唠，其中一些實(shí)際上可能很快（如果不是已經(jīng)） 會(huì)被Google批判狈网，所以要謹(jǐn)慎使用。然而警检，你很難知道什么時(shí)候一個(gè)CMS或者項(xiàng)目會(huì)迫使你需要get out圖像替換kit孙援！這里是過(guò)去的kit，在web完全落實(shí)之前扇雕，這可能是最后一份你需要的圖像替換技術(shù)列表拓售。
使用負(fù)的文本縮進(jìn) — Phark 方法
這是web開(kāi)發(fā)人員在某些情況下使用的最普遍的技術(shù)。這里的想法是通過(guò)設(shè)置一個(gè)很大的負(fù)text-indent镶奉，讓文本遠(yuǎn)離瀏覽器窗口：
.replace-indent {
width: 264px;
height: 106px;
background: url("assets/logo.png");
text-indent: -9999px;
}
這里有一個(gè)CodePen演示础淤，展示了使用text-indent隱藏文本時(shí)標(biāo)題的樣子：
查看筆記 圖像替換 – 縮進(jìn)方法崭放，作者 SitePoint (@SitePoint)，在CodePen鸽凶。
使用這種方法币砂，文本仍然可以被屏幕閱讀器獲取到。然而玻侥，當(dāng)文本右對(duì)齊的時(shí)侯决摧，這種方法就行不通了。由于這個(gè)text-indent凑兰，瀏覽器也需要為我們的標(biāo)題渲染一個(gè)非常大的盒子掌桩，這在一些很老舊的設(shè)備中可能會(huì)產(chǎn)生問(wèn)題。
Scott Kellum 方法
與其設(shè)置一個(gè)很大的負(fù)text-indent姑食，你可以設(shè)置它為100%波岛。這種方法下，瀏覽器不需要?jiǎng)?chuàng)建一個(gè)很大的盒子音半，性能會(huì)得到提升则拷。你不需要任何額外的標(biāo)記就可以使用這個(gè)方法。你需要的CSS如下：
.replace-scott {
width: 264px;
height: 106px;
background: url("assets/logo.png");
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
設(shè)置overflow為hidden可以隱藏文本曹鸠，whitespace: nowrap可以阻止換行煌茬。這種方法下，閱讀器仍然可以讀取文本彻桃。這里有一個(gè)這項(xiàng)技術(shù)的演示：
查看筆記 圖像替換 – Scott Kellum 方法宣旱，作者 SitePoint (@SitePoint)，在CodePen叛薯。
使用邊距 — Radu Darvas 方法
這項(xiàng)技術(shù)仍然是強(qiáng)制文本在瀏覽器窗口之外，但是是利用邊距去做的笙纤。這個(gè)想法是應(yīng)用一個(gè)很大的負(fù)的左邊距耗溜，并且給標(biāo)題一個(gè)相對(duì)大的寬度。
.replace-margin {
width: 2264px;
height: 106px;
background: url("assets/logo.png") top right no-repeat;
margin: 0 0 0 -2000px;
}
和上一種情況一樣省容，我們的logo被用作標(biāo)題的一個(gè)背景圖片抖拴。這里有一個(gè)演示，展現(xiàn)了這項(xiàng)技術(shù)是如何起作用的腥椒，首先是沒(méi)有邊距的阿宅，然后應(yīng)用這個(gè)邊距：
查看筆記 圖像替換 – Margin 方法，作者 SitePoint (@SitePoint)笼蛛，在CodePen洒放。
如果一直滾動(dòng)到右邊，你最終會(huì)看到第一個(gè)標(biāo)題的背景滨砍。實(shí)際上往湿，你不必?fù)?dān)心滾動(dòng)條妖异，因?yàn)檫@個(gè)大的負(fù)邊距補(bǔ)償了寬度(就像你在第二個(gè)標(biāo)題中見(jiàn)到的)。記住领追，這種方法對(duì)于瀏覽器執(zhí)行來(lái)說(shuō)并不高效他膳，因?yàn)闉g覽器不得不畫(huà)一個(gè)非常大的盒子。
使用內(nèi)邊距 — Langridge 方法
這次我們使用padding-top屬性把文本推出我們的標(biāo)題之外绒窑。這個(gè)屬性的值會(huì)被設(shè)置成與logo的高相等棕孙。然而，僅僅這些是不夠的些膨，我們還需要使用overflow: hidden來(lái)隱藏文本蟀俊。
.replace-padding {
width: 264px;
height: 0;
background: url("assets/logo.png");
padding: 106px 0 0 0;
overflow: hidden;
}
和之前的兩種方法相比，這個(gè)屬性可以表現(xiàn)出更好的性能傀蓉。它也提供了和之前兩種方法相同水平的可訪問(wèn)性欧漱。如下是這個(gè)技術(shù)的一個(gè)演示，第一個(gè)標(biāo)題沒(méi)有填充背景葬燎，第二個(gè)有：
查看筆記 圖像替換 – 內(nèi)邊距方法误甚，作者 SitePoint (@SitePoint)，在 CodePen谱净。
使用小的font-size— Lindsay 方法
另一種隱藏文本的方法是讓它變得非常小窑邦，并且將它的顏色設(shè)置成logo的背景。這種方法不會(huì)影響可訪問(wèn)性壕探，但是由于微小的字體和偽裝的顏色冈钦，你可能會(huì)遇到SEO困難。
.replace-font {
width: 264px;
height: 106px;
background: url("assets/logo.png");
font-size: 1px;
color: white;
}
這里有個(gè)該方法的演示李请，第一個(gè)圖像沒(méi)有設(shè)置font-size瞧筛，而是在第二個(gè)圖像中起了作用：
查看筆記 圖像替換 – font-size 方法，作者 SitePoint (@SitePoint)导盅，在 CodePen较幌。
如果你的logo沒(méi)有一個(gè)單一的背景色來(lái)允許完美的混合，你仍然會(huì)遇到困難白翻。這種情況下乍炉，你可以把顏色設(shè)置成transparent。
使用 Display — Fahrner 圖像置換
和其他方法不同滤馍，這個(gè)方法需要你增加額外的標(biāo)記岛琼。這里的想法是把文本包裹進(jìn)一個(gè)元素，并且設(shè)置它的display屬性為none。這個(gè)案例中的標(biāo)記可以是：
<h1 class="replace-display">
<span>SitePoint</span>
</h1>
CSS可以是：
.replace-display {
width: 264px;
height: 106px;
background: url("assets/logo.png");
}
.replace-display span{
display: none;
}
這里有一個(gè)演示，將我們的元素的display設(shè)置成none：
查看筆記 圖像替換 – Display 方法栖博，作者 SitePoint (@SitePoint)，在CodePen随珠。
這個(gè)方法雖然很容易實(shí)現(xiàn)灭袁，但是缺乏可訪問(wèn)性。這是因?yàn)?code>display設(shè)置成none的元素會(huì)被屏幕閱讀器忽略窗看。當(dāng)visibility設(shè)置成hidden時(shí)茸歧，同樣的問(wèn)題也會(huì)發(fā)生，所以你也不能用那個(gè)显沈。你可以設(shè)置opacity為0软瞎。這樣將會(huì)隱藏元素，同時(shí)保持它仍然可以被屏幕閱讀器訪問(wèn)拉讯。
使用 Overflow — Leon Dwyer 方法
我們已經(jīng)在增加一些內(nèi)邊距之后涤浇，使用過(guò)overflow屬性來(lái)隱藏文本。這次我們將僅僅使用overflow屬性來(lái)徹底隱藏元素魔慷。使用這個(gè)技術(shù)需要只锭，你將你的文本像之前那種方法一樣包裹進(jìn)一個(gè)元素中。這次我們的CSS看起來(lái)像這樣：
.replace-overflow {
width: 264px;
height: 106px;
background: url("assets/logo.png");
}
.replace-overflow span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
我們將span元素的寬和高都設(shè)置成0院尔。這會(huì)強(qiáng)制元素內(nèi)的文本移到它的盒子外蜻展。接著文本會(huì)被overflow: hidden屬性隱藏。這里有一個(gè)CodePen演示說(shuō)明了這項(xiàng)技術(shù)：
查看筆記 圖像替換 – Overflow 方法邀摆，作者 SitePoint (@SitePoint)纵顾，在 CodePen。
文本仍然可以被屏幕閱讀器訪問(wèn)栋盹。因此施逾，這里不會(huì)有可訪問(wèn)性的問(wèn)題。
使用絕對(duì)定位 — Levin 方法
這個(gè)方法也需要一個(gè)額外的元素來(lái)工作例获。然而汉额，這個(gè)元素不是包裹在文本周?chē)模怯糜诙ㄎ晃覀兊膱D像榨汤。這里是這個(gè)方法的標(biāo)記：
<h1 class="replace-position">
<span></span>SitePoint
</h1>
這是CSS：
.replace-position {
width: 264px;
height: 106px;
position: relative;
}
.replace-position span {
background: url("assets/logo.png");
width: 100%;
height: 100%;
position: absolute;
}
使用絕對(duì)定位來(lái)圖像置換的演示可以在下面看到：
查看筆記 圖像替換 – 絕對(duì)定位方法闷愤，作者 SitePoint (@SitePoint)，在 CodePen件余。
注意，為了完全覆蓋我們的標(biāo)題元素遭居，寬和高都設(shè)置成了100% 啼器。這個(gè)方法的唯一問(wèn)題是你使用的圖片必須是完全不透明的。如果不是這樣的話(huà)俱萍，用戶(hù)將可以透過(guò)你的圖像看到文本端壳。
使用一個(gè)偽造的圖像 — Radu Darvas Shim
這個(gè)方法除了我們平常的元素之外，還需要一個(gè)偽造的圖像來(lái)正常工作枪蘑。這個(gè)圖像是一個(gè) 1×1 像素损谦、透明的 GIF岖免。它的主要目的是如果圖片不能顯示，將顯示給用戶(hù)替代的文本照捡。標(biāo)記如下：
<h1 class="replace-image-span">
[站外圖片上傳中……(2)]
<span>SitePoint</span>
</h1>
這是你需要應(yīng)用的CSS：
.replace-image-span {
width: 264px;
height: 106px;
background: url("assets/logo.png");
}
.replace-image-span span{
display: none;
}
下面的演示應(yīng)該會(huì)讓你清楚明白這個(gè)方法是如何起效的：
查看筆記 圖像替換 – 偽造圖像方法颅湘，作者 SitePoint (@SitePoint)，在 CodePen栗精。
盡管真實(shí)的文本被隱藏了闯参，屏幕閱讀器仍然可以讀到替換的標(biāo)簽。所以悲立，這個(gè)方法不會(huì)造成任何可訪問(wèn)性的問(wèn)題鹿寨。唯一的問(wèn)題就是這里的標(biāo)簽是非語(yǔ)義化的和偽造的。此外薪夕，如果CSS和圖像都被關(guān)閉的話(huà)脚草，你將會(huì)看到這個(gè)文本兩次。
使用真實(shí)的圖像 — 使用內(nèi)聯(lián)圖像的 Phark 方法
這次原献，我們將使用一個(gè)真實(shí)的圖像來(lái)做圖像替換馏慨。這個(gè)圖像有替換的文本，在圖像不能顯示時(shí)會(huì)顯示出來(lái)嚼贡。標(biāo)記如下：
<h1 class="replace-image-link">
[站外圖片上傳中……(3)]
</h1>
下面的CSS做了真正的替換：
.replace-image-link {
width: 264px;
height: 106px;
background: url("assets/logo.png");
text-indent: -9999px;
}
下面的演示說(shuō)明了這個(gè)技術(shù)是如何工作的：
查看筆記 圖像替換 – 真實(shí)圖像技術(shù)熏纯，作者 SitePoint (@SitePoint)，在 CodePen粤策。
你將會(huì)看到的圖像不是來(lái)自標(biāo)簽樟澜，而是來(lái)自background屬性。除了我們之前討論過(guò)的使用大的負(fù)文本縮進(jìn)帶來(lái)的問(wèn)題叮盘，這項(xiàng)技術(shù)似乎也不利于SEO秩贰。這項(xiàng)技術(shù)優(yōu)于其他方法的一個(gè)優(yōu)點(diǎn)是，在CSS關(guān)閉的情況下圖像依然可見(jiàn)并且保持存在柔吼，但是問(wèn)題是你為什么不直接使用它自己的圖像呢...
使用 Clip-path
屬性clip-path可以隱藏你指定的路徑之外的所有東西毒费。我們可以用它裁剪文本并將它隱藏。這個(gè)文本仍然可以被屏幕閱讀器訪問(wèn)愈魏，只是被視覺(jué)上隱藏了觅玻。標(biāo)記如下：
<h1 class="replace-clip-path">
<span>SitePoint</span>
</h1>
這是你需要應(yīng)用的 CSS：
.replace-clip-path {
width: 264px;
height: 106px;
background: url("assets/logo.png");
}
.replace-clip-path span{
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}
你可以修改clip-path的值來(lái)看看文本是怎么被裁剪的：
查看筆記 圖像替換 – clip-path 方法，作者 SitePoint (@SitePoint)培漏，在 CodePen溪厘。
這個(gè)方法的唯一問(wèn)題就是瀏覽器目前還沒(méi)有完全支持。SitePoint 最近關(guān)于clip-path
屬性發(fā)布了一篇文章牌柄，進(jìn)行了更詳細(xì)的論述畸悬。瀏覽器一旦開(kāi)始支持它，圖像替換技術(shù)就會(huì)變得多余且沒(méi)有必要了珊佣。
使用偽元素 — Nash 圖像替換
這個(gè)技術(shù)使用一個(gè)偽元素把文本拋到一邊蹋宦。標(biāo)記如下：
<h1 class="replace-pseudo">
SitePoint
</h1>
下面的 CSS 使這項(xiàng)技術(shù)生效：
.replace-pseudo {
width: 264px;
height: 106px;
overflow: hidden;
}
.replace-pseudo:before{
content: url("assets/logo.png");
}
這里有一個(gè)技術(shù)演示：
查看筆記 Image Replacement – Psuedo Element Technique披粟，作者 SitePoint (@SitePoint)，在CodePen冷冗。
這個(gè)偽元素將文本擠到一邊守屉。文本溢出，會(huì)被overflow: hidden屬性隱藏贾惦。這項(xiàng)技術(shù)的一個(gè)問(wèn)題是它只能工作在Internet Explorer 8 及以上胸梆。
總結(jié)
這個(gè)作者還寫(xiě)了：
上述討論的每個(gè)方法都有自己的優(yōu)缺點(diǎn)⌒氚澹總的來(lái)說(shuō)碰镜，他們都將不利于SEO，如果你可以完全避免使用它 — 那么現(xiàn)在是時(shí)候擺脫它們了习瑰！在 SitePoint 接下來(lái)的一篇文章中绪颖，我們將會(huì)看到行業(yè)里是如何擺脫他們的，并且了解目前最好的方法是什么甜奄。如果你想到了任何其他的方法柠横，或者你對(duì)于我們討論的技術(shù)有所補(bǔ)充，可以在下面評(píng)論课兄。
來(lái)自 PatCat (30/06/2016) 的更新: 這篇文章起初說(shuō)到在網(wǎng)站標(biāo)題中使用圖像可能會(huì)對(duì)SEO和可訪問(wèn)性有負(fù)面影響牍氛。這不是真的。實(shí)際上烟阐，由于Google正在為圖像替換做準(zhǔn)備工作搬俊，情況可能相反。我已經(jīng)修改了這篇文章, 謝謝你們的評(píng)論蜒茄！
