> CSS圖像替換：現(xiàn)代技術(shù)的綜合指南

> CSS圖像更換，一種用於將文本與圖像交換的技術(shù)，擁有豐富的歷史。 儘管許多方法仍然有效，但由於SEO原因，有些方法可能會(huì)面臨Google的處罰。 本指南提供了現(xiàn)有技術(shù)的完整概述，承認(rèn)其潛在的缺點(diǎn)，並建議何時(shí)考慮替代方案。

關(guān)鍵因素：

• 屏幕讀取器的可訪問(wèn)性至關(guān)重要；無(wú)論視覺(jué)替換如何
現(xiàn)代網(wǎng)絡(luò)開(kāi)發(fā)提供了通常提供更好性能和SEO的替代方案。
• 圖像替換技術(shù)：

（phark方法）：
1. 這種廣泛使用的方法通過(guò)應(yīng)用大型負(fù)

   。 text-indent text-indentpros：

   >簡(jiǎn)單，廣泛支持。

   .replace-indent {
     width: 264px;
     height: 106px;
     background: url("assets/logo.png");
     text-indent: -9999px;
   }

   >
   • cons：不適用於右鍵的文本，會(huì)影響較舊設(shè)備的性能。 請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。
   （Scott kellum方法）：這種優(yōu)化的方法將
   設(shè)置為100％，通過(guò)避免渲染大型盒子來(lái)提高性能。

2. text-indent: 100%pros：提高性能，維護(hù)屏幕讀取器可訪問(wèn)性。 text-indent

   .replace-scott {
     width: 264px;
     height: 106px;
     background: url("assets/logo.png");
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
   }

   cons：
   >無(wú)顯著意義。請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。
   • 負(fù)邊緣（Radu Darvas技術(shù)）：使用大的負(fù)邊距將文本推開(kāi)屏幕。

3. pros：>與各種元素類型一起使用。 >

   .replace-margin {
     width: 2264px;
     height: 106px;
     background: url("assets/logo.png") top right no-repeat;
     margin: 0 0 0 -2000px;
   }

   cons：
   >由於渲染大盒子而導(dǎo)致的瀏覽器性能差。請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。
   • >>填充（langridge方法）：>使用填充物，
   隱藏文本。

4. PROS：良好的性能，保持可訪問(wèn)性。 overflow: hidden>

   .replace-padding {
     width: 264px;
     height: 0;
     background: url("assets/logo.png");
     padding: 106px 0 0 0;
     overflow: hidden;
   }

   cons：
   相對(duì)較少的常見(jiàn)。請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。
   • >小（lindsay方法）：
   >通過(guò)使用微小的
   和匹配文本顏色與背景匹配。 >

   .replace-indent {
     width: 264px;
     height: 106px;
     background: url("assets/logo.png");
     text-indent: -9999px;
   }

   • PROS：簡(jiǎn)單。
   • cons：>偽裝文本引起的潛在SEO處罰，可能與不均勻背景無(wú)法完美地工作。請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。

5. display: none>（fahrner映像替換）：>在包裝元素上使用display: none隱藏文本。

   .replace-scott {
     width: 264px;
     height: 106px;
     background: url("assets/logo.png");
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
   }

   • PROS：簡(jiǎn)單。
   • cons：可訪問(wèn)性差（屏幕讀取器忽略display: none）。

6. overflow: hidden（Leon Dwyer方法）：>通過(guò)在零尺寸的包裝器上設(shè)置overflow: hidden來(lái)掩蓋文本。

   .replace-margin {
     width: 2264px;
     height: 106px;
     background: url("assets/logo.png") top right no-repeat;
     margin: 0 0 0 -2000px;
   }

   • pros：維護(hù)可訪問(wèn)性。
   cons：
   • >需要額外的標(biāo)記。請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。
7. 絕對(duì)定位（Levin Technique）：

   絕對(duì)將圖像定位在容器中。 >

   .replace-padding {
     width: 264px;
     height: 0;
     background: url("assets/logo.png");
     padding: 106px 0 0 0;
     overflow: hidden;
   }

   PROS：
   簡(jiǎn)單。
   • cons：
   需要不透明的圖像。請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。
偽造的映像（radu darvas shim）：在禁用圖像時(shí)使用透明的gif用於alt文本顯示。

8. pros：

   提供alt文本。

   .replace-font {
     width: 264px;
     height: 106px;
     background: url("assets/logo.png");
     font-size: 1px;
     color: white;
   }

   • cons：
   • >帶有
   的實(shí)際圖像：
   >使用帶有alt文本的圖像，並使用
>。
9. 隱藏文本

   text-indentpros：text-indent即使在禁用CSS的情況下也可以看到圖像。

   >

   .replace-display span {
     display: none;
   }

   cons：
   • >潛在的SEO問(wèn)題，大型負(fù)缺點(diǎn)。請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。
   • text-indent
   ：
   >使用
屬性剪輯文本。

10. clip-pathpros：clip-path維護(hù)可訪問(wèn)性。

    .replace-overflow span {
      display: block;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    cons：
    >有限的瀏覽器支持。請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。
    • > pseudo-element（）（nash映像更換）：
    使用偽元素顯示圖像，並用
    。

11. PROS：::before相對(duì)乾淨(jìng)。 overflow: hidden

    cons：

    .replace-position span {
      background: url("assets/logo.png");
      width: 100%;
      height: 100%;
      position: absolute;
    }

    >有限的IE支持。請(qǐng)參閱Codepen Demo [鏈接到Codepen Demo]。
    • 結(jié)論：

      儘管這些技術(shù)仍然具有功能，但現(xiàn)代網(wǎng)絡(luò)開(kāi)發(fā)通常提供了優(yōu)越的替代方案。 考慮使用直接應(yīng)用於元素的SVG，圖標(biāo)字體或背景圖像，以提高性能，SEO和可維護(hù)性。 選擇取決於特定上下文和項(xiàng)目要求。 始終優(yōu)先考慮可訪問(wèn)性和SEO最佳實(shí)踐。

      >常見(jiàn)問(wèn)題（常見(jiàn)問(wèn)題解答）：（這些是釋義和鞏固的）

      什麼是CSS映像更換？
      • > 如何工作？
      通過(guò)用大的負(fù)面凹痕將文本推開(kāi)，以隱藏文本。
      • text-indent> ？
      的限制不適用於左右語(yǔ)言，潛在的性能問(wèn)題。
      • text-indent什麼是phark方法？ 一種基於常見(jiàn)的技術(shù)。
      • > leahy/langridge方法？ 用CSS？ 在>標(biāo)籤中替換圖像？改用背景圖像。 text-indent
      >
      • >使用CSS？ 是的，使用>屬性。 text-indent
      >最佳實(shí)踐嗎？ 如果無(wú)法正確完成，則
      • >SEO衝擊？謹(jǐn)慎使用。 <img alt="CSS圖像更換：文本內(nèi)部，負(fù)邊距等等" > 在現(xiàn)代網(wǎng)絡(luò)開(kāi)發(fā)中的相關(guān)性>>在某些利基案例中仍然相關(guān)，但通常被更好的替代方案所取代。
      >
      • 記住將和background替換為圖像的實(shí)際路徑。 始終在不同的瀏覽器和設(shè)備上進(jìn)行徹底測(cè)試。

以上是CSS圖像更換：文本內(nèi)部，負(fù)邊距等等的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！