CSS圖像更換：文本內部，負邊距等等-css教學-PHP中文網

首頁

web前端

css教學

CSS圖像更換：文本內部，負邊距等等

Lisa Kudrow

Feb 21, 2025 am 08:36 AM

> CSS圖像替換：現代技術的綜合指南

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

CSS Image Replacement: text-indent, Negative Margins and more

關鍵因素：

存在幾種CSS圖像替代技術，但有些可能會對SEO產生負面影響。謹慎使用。

屏幕讀取器的可訪問性至關重要；無論視覺替換如何
圖像替換技術：

負面

這種廣泛使用的方法通過應用大型負
。 text-indent text-indentpros：
>簡單，廣泛支持。
```
.replace-indent {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}
```
>
- cons：不適用於右鍵的文本，會影響較舊設備的性能。請參閱Codepen Demo [鏈接到Codepen Demo]。
設置為100％，通過避免渲染大型盒子來提高性能。
text-indent: 100%pros：提高性能，維護屏幕讀取器可訪問性。 text-indent
```
.replace-scott {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
```
cons：
- 負邊緣（Radu Darvas技術）：使用大的負邊距將文本推開屏幕。
pros：>與各種元素類型一起使用。 >
```
.replace-margin {
  width: 2264px;
  height: 106px;
  background: url("assets/logo.png") top right no-repeat;
  margin: 0 0 0 -2000px;
}
```
cons：
- >>填充（langridge方法）：>使用填充物，
PROS：良好的性能，保持可訪問性。 overflow: hidden>
```
.replace-padding {
  width: 264px;
  height: 0;
  background: url("assets/logo.png");
  padding: 106px 0 0 0;
  overflow: hidden;
}
```
cons：
- >小（lindsay方法）：
和匹配文本顏色與背景匹配。
>
```
.replace-indent {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}
```
- PROS：簡單。
- cons：>偽裝文本引起的潛在SEO處罰，可能與不均勻背景無法完美地工作。請參閱Codepen Demo [鏈接到Codepen Demo]。
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：簡單。
- cons：可訪問性差（屏幕讀取器忽略display: none）。
overflow: hidden（Leon Dwyer方法）：>通過在零尺寸的包裝器上設置overflow: hidden來掩蓋文本。
```
.replace-margin {
  width: 2264px;
  height: 106px;
  background: url("assets/logo.png") top right no-repeat;
  margin: 0 0 0 -2000px;
}
```
- pros：維護可訪問性。
- >需要額外的標記。請參閱Codepen Demo [鏈接到Codepen Demo]。
絕對定位（Levin Technique）：
絕對將圖像定位在容器中。 >
```
.replace-padding {
  width: 264px;
  height: 0;
  background: url("assets/logo.png");
  padding: 106px 0 0 0;
  overflow: hidden;
}
```
PROS：
- cons：

在禁用圖像時使用透明的gif用於alt文本顯示。

pros：

提供alt文本。

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

cons：
>帶有

>使用帶有alt文本的圖像，並使用

>。

隱藏文本

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

.replace-display span {
  display: none;
}

>潛在的SEO問題，大型負缺點。請參閱Codepen Demo [鏈接到Codepen Demo]。
text-indent

>使用

屬性剪輯文本。

clip-pathpros：clip-path維護可訪問性。

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

cons：

> pseudo-element（）（nash映像更換）：

。

PROS：::before相對乾淨。 overflow: hidden

cons：

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

>有限的IE支持。請參閱Codepen Demo [鏈接到Codepen Demo]。

結論：
儘管這些技術仍然具有功能，但現代網絡開發通常提供了優越的替代方案。考慮使用直接應用於元素的SVG，圖標字體或背景圖像，以提高性能，SEO和可維護性。選擇取決於特定上下文和項目要求。始終優先考慮可訪問性和SEO最佳實踐。

>常見問題（常見問題解答）：（這些是釋義和鞏固的）

什麼是CSS映像更換？
> 如何工作？
通過用大的負面凹痕將文本推開，以隱藏文本。
text-indent> ？
的限制不適用於左右語言，潛在的性能問題。
text-indent什麼是phark方法？ 一種基於常見的技術。

> leahy/langridge方法？用CSS？在>標籤中替換圖像？改用背景圖像。 text-indent
>
>使用CSS？ 是的，使用>屬性。 text-indent
>最佳實踐嗎？如果無法正確完成，則
>SEO衝擊？謹慎使用。 <img alt="CSS圖像更換：文本內部，負邊距等等" > 在現代網絡開發中的相關性>>在某些利基案例中仍然相關，但通常被更好的替代方案所取代。
>
記住將和background替換為圖像的實際路徑。始終在不同的瀏覽器和設備上進行徹底測試。