如何在 CSS 中創建雙色文字而不重複內容？

使用CSS的雙色文本

問題是如何實現一側具有特定顏色和背景而一側具有特定顏色和背景的文本效果另一面有不同的顏色和背景，沒有重複的內容。提供的範例透過使用帶有 inline-block 的 div 並設定每個 div 的寬度、背景顏色、溢出和高度來展示此效果。在這些 div 內，段落定義為寬度 200% 和不同的文字顏色。

但是，這種方法需要複製內容。為了避免這種情況，可以採用另一種技術。 Background-clip:text CSS 屬性可以解決這個問題。此屬性可讓您定義應渲染背景的區域。在這種情況下，可以將其設為“文字”，這會將背景應用於文字本身。

使用此技術，您可以為文字建立漸變背景，允許兩側有不同的顏色組合。以下 CSS 和 HTML 程式碼示範了這個方法：

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main>p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<div>

以上是如何在 CSS 中創建雙色文字而不重複內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！